React虚拟化列表未渲染组件。

huangapple go评论78阅读模式
英文:

React virtualized list not rendering components

问题

我试图使用react-window和react-virtualized-auto-sizer来虚拟化组件列表,但<AutoSizer>组件没有渲染列表。

这是代码:

<AutoSizer>
     {({height, width}) => 
     (
     <List
          className="List"
          height={1000}
          itemCount={products.artigos.length}
          itemSize={35}
          width={width}
     >
     {
       products.artigos.map((product) =>
       (
          <ProductListItem
               id={product.id}
               reference={product.ref}
               name={product.name}
               image={product.image}
               onClick={this.renderProduct.bind(this)}
           />
        ))
    }   
     </List>
  )}
</AutoSizer>

编辑

我将库更改为import { List, AutoSizer } from 'react-virtualized'; 并更改了列表脚本:

<div style={{ flex: '1 1 auto', height: '100vh' }}>
    <AutoSizer>
        {({height, width}) => 
        (
            <List
                className="List"
                height={height}
                rowCount={products.artigos.length}
                rowHeight={35}
                width={width}
                rowRenderer={this.getProducts.bind(this)}
            />
        )}
    </AutoSizer>
</div>

其中rowRenderer 值是一个返回数组的函数:

getProducts()
{
    return products.artigos.map((product, index) =>
    (
        <ProductListItem key={index}
            id={product.id}
            reference={product.ref}
            name={product.name}
            image={product.image}
            onClick={this.renderProduct.bind(this)}
        />
    ))
}
英文:

I'm trying to use react-window and react-virtualized-auto-sizer to virtualize a components list, but the &lt;AutoSizer&gt; component isn't rendering the list.

this is the code:

&lt;AutoSizer&gt;
     {({height, width}) =&gt; 
     (
     &lt;List
          className=&quot;List&quot;
          height={1000}
          itemCount={products.artigos.length}
          itemSize={35}
          width={width}
     &gt;
     {
       products.artigos.map((product) =&gt;
       (
          &lt;ProductListItem
               id={product.id}
               reference={product.ref}
               name={product.name}
               image={product.image}
               onClick={this.renderProduct.bind(this)}
           /&gt;
        ))
    }   
     &lt;/List&gt;
  )}
&lt;/AutoSizer&gt;

EDIT

I changed the libraries to import { List, AutoSizer } from &#39;react-virtualized&#39;; and the list script:

&lt;div style={{ flex: &#39;1 1 auto&#39; , height: &#39;100vh&#39; }}&gt;
    &lt;AutoSizer&gt;
        {({height, width}) =&gt; 
        (
            &lt;List
                className=&quot;List&quot;
                height={height}
                rowCount={products.artigos.length}
                rowHeight={35}
                width={width}
                rowRenderer={this.getProducts.bind(this)}
            /&gt;
        )}
    &lt;/AutoSizer&gt;
&lt;/div&gt;

where rowRenderer value is a function that returns the array:

getProducts()
{
    return products.artigos.map((product, index) =&gt;
    (
        &lt;ProductListItem key={index}
            id={product.id}
            reference={product.ref}
            name={product.name}
            image={product.image}
            onClick={this.renderProduct.bind(this)}
        /&gt;
    ))
}

答案1

得分: 1

尝试以下两种解决方案之一:

1) 组件的高度存在问题,导致无法显示:

&lt;AutoSizer&gt;包装在一个具有高度的块中,例如height: 100vh;

&lt;div style={{ flex: &#39;1 1 auto&#39; , height: &#39;100vh&#39; }}&gt;
  &lt;AutoSizer&gt;
  {/* ... */}
  &lt;/AutoSizer&gt;
&lt;/div&gt;

2) 如果这不起作用,删除包 react-virtualized-auto-sizer,而后通过 npm 安装 react-virtualized

完成后,不要忘记修复导入,也就是从新库导入 &lt;AutoSizer&gt;

import { AutoSizer } from &#39;react-virtualized&#39;;
英文:

Try one of both solutions:

1) There's a problem in the height of the component, preventing it from being displayed:

Wrap &lt;AutoSizer&gt; within a block with a height, e.g. height: 100vh;

&lt;div style={{ flex: &#39;1 1 auto&#39; , height: &#39;100vh&#39; }}&gt;
  &lt;AutoSizer&gt;
  {/* ... */}
  &lt;/AutoSizer&gt;
&lt;/div&gt;

2) If this doesn't work, remove the package react-virtualized-auto-sizer and install instead react-virtualized (through npm).

Once done, don't forget to fix the import, that is, import &lt;AutoSizer&gt; from the new library

import { AutoSizer } from &#39;react-virtualized&#39;;

huangapple
  • 本文由 发表于 2023年3月4日 02:06:27
  • 转载请务必保留本文链接:https://go.coder-hub.com/75630486.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定