[英]How to measure a rows height in react-virtualized list
I'm a little uncertain as how to achieve dynamic heights of a List using react-virtualized . 我有点不确定如何使用react-virtualized实现List的动态高度。
I have a component as follows: 我有一个组件如下:
import { List } from 'react-virtualized';
<List
height={400}
rowCount={_.size(messages)}
rowHeight={(index) => {
return 100; // This needs to measure the dom.
}}
rowRenderer={({ key, index, style }) => <Message style={style} {...messages[index]} />}}
width={300}
/>
I have looked at using CellMeasurer as per the docs which says it can be used with the List component but I have no idea how this example actually works... 我已经看过使用CellMeasurer按照文档说它可以与List组件一起使用但我不知道这个例子实际上是如何工作的......
I've also tried to work out how it has been achieved in the demo code but have also reached a dead end. 我也试图弄清楚它是如何在演示代码中实现的,但也达到了死胡同。
Can someone please assist me on how I would measure the DOM to get each items height dynamically. 有人可以帮助我如何测量DOM以动态获取每个项目的高度。
Sorry you found the docs to be confusing. 对不起,您发现文档令人困惑。 I will try to update them to be clearer.
我会尝试更新它们以使其更清晰。 Hopefully this will help:
希望这会有所帮助:
import { CellMeasurer, List } from 'react-virtualized';
function renderList (listProps) {
return (
<CellMeasurer
cellRenderer={
// CellMeasurer expects to work with a Grid
// But your rowRenderer was written for a List
// The only difference is the named parameter they
// So map the Grid params (eg rowIndex) to List params (eg index)
({ rowIndex, ...rest }) => listProps.cellRenderer({ index: rowIndex, ...rest })
}
columnCount={1}
rowCount={listProps.rowCount}
width={listProps.width}
>
{({ getRowHeight, setRef }) => (
<List
{...listProps}
ref={setRef}
rowHeight={getRowHeight}
/>
)}
</CellMeasurer>
)
}
There are also demos of this component here showing how it's used. 这个组件的演示也在这里显示它是如何使用的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.