javascript - React-virtualized 动态高度列表呈现最初堆叠的所有内容
问题描述
我正在尝试使用 react-virtualized 来虚拟化一个列表,其中一些行具有不同的高度,并且该列表占用了父级中的所有空间。我正在尝试使用 CellMeasurer、AutoSizer 和 List 组件来完成此操作。
我的包版本如下:
react: "16.8.6"
react-dom: "16.8.6"
react-virtualized: "^9.21.1"
import React, { PureComponent } from 'react';
import 'react-virtualized/styles.css';
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
import { CellMeasurer, CellMeasurerCache, List } from 'react-virtualized';
class Table extends PureComponent {
rowRenderer = ({ index, style, key }) => {
return (
<CellMeasurer
cache={this.cache}
columnIndex={0}
key={key}
parent={parent}
rowIndex={index}
>
<div style={style} key={key}>
content
</div>
</CellMeasurer>
);
}
cache = new CellMeasurerCache({
defaultHeight: 24,
fixedWidth: true,
});
renderAutoSizerContent = () => {
return this.RenderList;
}
RenderList = ({ height, width }) => {
return (<List
items={this.props.items}
width={width}
height={height}
rowCount={this.props.items.length}
rowHeight={this.cache.rowHeight}
rowRenderer={this.rowRenderer}
deferredMeasurementCache={this.cache}
/>
);
}
render() {
return (
<AutoSizer
items={ this.props.items}
>
{this.renderAutoSizerContent()}
</AutoSizer>
);
}
}
export default Table;
初始渲染后,一切看起来像这样。由于某种原因,数组中每个元素的 top 属性都是 0:
滚动或触发重新渲染后,项目似乎获得了它们的顶级属性和以下渲染。在实际代码中,我的一些元素具有高度差异,但高度似乎默认为我给 CellMeasurerCache 构造函数的 defaultHeight。
如何使初始渲染具有每个元素的 top 属性,以及如何正确计算高度?我在这里显示的代码中做错了什么?
解决方案
在您的rowRenderer组件中,您向CellMeasurer提供了parent道具,但 parent 未定义。
如文档中所述,您从 rowRenderer 获得父级:https ://github.com/bvaughn/react-virtualized/blob/master/docs/List.md#rowrenderer
所以你的 rowRenderer 组件应该是:
rowRenderer = ({ index, style, key, parent }) => {
return (
<CellMeasurer
cache={this.cache}
columnIndex={0}
key={key}
parent={parent}
rowIndex={index}
>
<div style={style} key={key}>
{items[index]}
</div>
</CellMeasurer>
);
}
您还可以使用工作示例检查此代码沙箱:https ://codesandbox.io/s/material-demo-yw1k8?fontsize=14
推荐阅读
- c# - Xamarin 滑块:“值是最大值的无效值”(仅当导航离开页面时)
- spring - HttpServletRequest 中的最大参数个数
- javascript - 在父 DIV 之外打开自定义上下文菜单
- java - 是否有可能仅使用 Spring Security 和 Data JPA 来实现数据库支持的加密登录过程?
- c# - 具有多个会话的 MVC 多个按钮(例如:upvotes)
- python - 删除包含特定值的行之后的 pandas DataFrame 行
- jenkins-plugins - Websphere 部署从 plugin-cfg.xml 中删除 uri-groups
- python - 如何对列名的一部分进行分组,并聚合意味着?
- amazon-cloudformation - 可以为 AWS 批处理的 cloudformation 堆栈中的同一计算环境定义多个作业队列吗?
- c++ - 当输入缓冲区非常大时,std::stoul() 需要很长时间 char*