英文:
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 <AutoSizer>
component isn't rendering the list.
this is the code:
<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>
EDIT
I changed the libraries to import { List, AutoSizer } from 'react-virtualized';
and the list script:
<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>
where rowRenderer
value is a function that returns the array:
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)}
/>
))
}
答案1
得分: 1
尝试以下两种解决方案之一:
1) 组件的高度存在问题,导致无法显示:
将<AutoSizer>
包装在一个具有高度的块中,例如height: 100vh;
<div style={{ flex: '1 1 auto' , height: '100vh' }}>
<AutoSizer>
{/* ... */}
</AutoSizer>
</div>
2) 如果这不起作用,删除包 react-virtualized-auto-sizer,而后通过 npm 安装 react-virtualized。
完成后,不要忘记修复导入,也就是从新库导入 <AutoSizer>
。
import { AutoSizer } from 'react-virtualized';
英文:
Try one of both solutions:
1) There's a problem in the height of the component, preventing it from being displayed:
Wrap <AutoSizer>
within a block with a height, e.g. height: 100vh;
<div style={{ flex: '1 1 auto' , height: '100vh' }}>
<AutoSizer>
{/* ... */}
</AutoSizer>
</div>
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 <AutoSizer>
from the new library
import { AutoSizer } from 'react-virtualized';
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论