[英]Dynamic height with infinite scroll (react-virtualized)
我正在使用'react-virtualized'渲染无限滚动列表。
但是,我无法动态呈现rowHeight
。 我尝试了一下,但这只是桌面上的事,感觉不对。
我尝试按照示例进行操作,但没有成功。
计算真实行高的正确方法是什么?
它应该对移动响应。
这是一个例子:
https://codesandbox.io/s/ADARgvlxB
class App extends React.Component {
render() {
return (
<div>
<AutoSizer>
{({ height, width }) => (
<List
height={600}
width={width}
rowCount={foo.length}
rowHeight={({ index }) => {
const x = foo[index];
if (x.name.length < 10) { return 20; }
else if (x.name.length > 9) { return 40;}
}}
rowRenderer={({ index, style }) => {
const x = foo[index];
return (
<div key={index} style={style}>
{x.name}
</div>
);
}}
/>
)}
</AutoSizer>
</div>
);
}
}
计算真实行高的正确方法是什么?
这就是反应虚拟化CellMeasurer
组件的用途。 您可以在此处看到有关测量动态高度的演示 。 该演示的源代码是此处的*.example.js
文件 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.