React 虚拟化列表不渲染组件

Question

我正在尝试使用 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>

Answer 1

尝试两种解决方案之一：

1) 组件高度有问题，无法显示：

将

<AutoSizer>

包裹在一个高度的块中，例如

height: 100vh;

<div style={{ flex: '1 1 auto' , height: '100vh' }}>
  <AutoSizer>
  {/* ... */}
  </AutoSizer>
</div>

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

完成后，不要忘记修复导入，即从新库中导入

<AutoSizer>

import { AutoSizer } from 'react-virtualized';