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

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

React virtualized list not rendering components

问题

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

这是代码：

  1. <AutoSizer>
  2.      {({height, width}) => 
  3.      (
  4.      <List
  5.           className="List"
  6.           height={1000}
  7.           itemCount={products.artigos.length}
  8.           itemSize={35}
  9.           width={width}
  10.      >
  11.      {
  12.        products.artigos.map((product) =>
  13.        (
  14.           <ProductListItem
  15.                id={product.id}
  16.                reference={product.ref}
  17.                name={product.name}
  18.                image={product.image}
  19.                onClick={this.renderProduct.bind(this)}
  20.            />
  21.         ))
  22.     }   
  23.      </List>
  24.   )}
  25. </AutoSizer>

编辑

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

  1. <div style={{ flex: '1 1 auto', height: '100vh' }}>
  2.     <AutoSizer>
  3.         {({height, width}) => 
  4.         (
  5.             <List
  6.                 className="List"
  7.                 height={height}
  8.                 rowCount={products.artigos.length}
  9.                 rowHeight={35}
  10.                 width={width}
  11.                 rowRenderer={this.getProducts.bind(this)}
  12.             />
  13.         )}
  14.     </AutoSizer>
  15. </div>

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

  1. getProducts()
  2. {
  3.     return products.artigos.map((product, index) =>
  4.     (
  5.         <ProductListItem key={index}
  6.             id={product.id}
  7.             reference={product.ref}
  8.             name={product.name}
  9.             image={product.image}
  10.             onClick={this.renderProduct.bind(this)}
  11.         />
  12.     ))
  13. }
英文:

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:

  1. &lt;AutoSizer&gt;
  2.      {({height, width}) =&gt; 
  3.      (
  4.      &lt;List
  5.           className=&quot;List&quot;
  6.           height={1000}
  7.           itemCount={products.artigos.length}
  8.           itemSize={35}
  9.           width={width}
  10.      &gt;
  11.      {
  12.        products.artigos.map((product) =&gt;
  13.        (
  14.           &lt;ProductListItem
  15.                id={product.id}
  16.                reference={product.ref}
  17.                name={product.name}
  18.                image={product.image}
  19.                onClick={this.renderProduct.bind(this)}
  20.            /&gt;
  21.         ))
  22.     }   
  23.      &lt;/List&gt;
  24.   )}
  25. &lt;/AutoSizer&gt;

EDIT

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

  1. &lt;div style={{ flex: &#39;1 1 auto&#39; , height: &#39;100vh&#39; }}&gt;
  2.     &lt;AutoSizer&gt;
  3.         {({height, width}) =&gt; 
  4.         (
  5.             &lt;List
  6.                 className=&quot;List&quot;
  7.                 height={height}
  8.                 rowCount={products.artigos.length}
  9.                 rowHeight={35}
  10.                 width={width}
  11.                 rowRenderer={this.getProducts.bind(this)}
  12.             /&gt;
  13.         )}
  14.     &lt;/AutoSizer&gt;
  15. &lt;/div&gt;

where rowRenderer value is a function that returns the array:

  1. getProducts()
  2. {
  3.     return products.artigos.map((product, index) =&gt;
  4.     (
  5.         &lt;ProductListItem key={index}
  6.             id={product.id}
  7.             reference={product.ref}
  8.             name={product.name}
  9.             image={product.image}
  10.             onClick={this.renderProduct.bind(this)}
  11.         /&gt;
  12.     ))
  13. }

答案1

得分: 1

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

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

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

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

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

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

  1. 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;

  1. &lt;div style={{ flex: &#39;1 1 auto&#39; , height: &#39;100vh&#39; }}&gt;
  2.   &lt;AutoSizer&gt;
  3.   {/* ... */}
  4.   &lt;/AutoSizer&gt;
  5. &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

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

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

发表评论

匿名网友

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

确定