我正在使用“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>
);
}
}
最佳答案
What is the correct way to calculate the true row height?
这就是react-virtualized CellMeasurer
component是为了.你可以看到一个demo of it measuring dynamic heights here 。演示的源代码是*.example.js
files here .
关于javascript - 无限滚动的动态高度( react 虚拟化),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45352436/