问题描述
我有点不确定如何使用根据文档说它可以与List组件一起使用但我没有想法这个例子实际上是如何工作的......
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...
我也试图弄清楚它是如何在但也达到了死胡同。
I've also tried to work out how it has been achieved in the demo code but have also reached a dead end.
有人可以帮助我如何测量DOM以动态获取每个物品的高度。
Can someone please assist me on how I would measure the DOM to get each items height dynamically.
推荐答案
对不起,您发现文档令人困惑。我会尝试更新它们以使其更清晰。希望这会有所帮助:
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.
这篇关于如何在react-virtualized列表中测量行高的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!