我有点不确定如何使用react-virtualized实现List的动态高度。
我有一个组件如下:
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}
/>
我已经看过使用CellMeasurer按照文档说明它可以与List组件一起使用但我不知道这个例子实际上是如何工作的......
我也试图弄清楚它是如何在demo code中实现的,但也达到了死胡同。
有人可以帮助我如何衡量DOM以动态获取每个物品的高度。
答案 0 :(得分:8)
很抱歉,您发现这些文档令人困惑。我会尝试更新它们以使其更清晰。希望这会有所帮助:
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>
)
}
此组件here也有演示如何使用它。