我正在使用'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>
);
}
}
答案 0 :(得分:1)
计算真实行高的正确方法是什么?
这就是react-virtualized CellMeasurer
component的用途。你可以看到demo of it measuring dynamic heights here。演示的源代码是*.example.js
files here。