1

我想使用 react-window 的原因是为了避免过多的 DOM 问题。另外，因为我正在使用nextjs并且React.lazy()不在那里工作。我有一个动态生成子组件的组件，您可以在此处Layout看到正在解决的问题。但是，在我看来，不可能事先得到孩子们的身高。

除了LayoutWrapper如上一个问题所示，VariableSizeList正在为我设置如下：

const [heights, setHeights] = React.useState<number[]>([])

React.useEffect(() => {
  // This will actually returns [] which I don't want to happen.
  // I want it to return an array of heights
  const data = onMount()
  setHeights(data)
}, [onMount])

const Row = ({index, style}: ListChildComponentProps) => (
  <div style={style}>{childrenArr[index]}</div>
)

const getItemSize = (index: number) => heights[index]

return (
   <AutoSizer disableWidth>
     {({height, width}) => (
       <VariableSizeList
         height={height}
         itemCount={childrenArr.length}
         itemSize={getItemSize}
         width={width}
       >
        {Row}
       </VariableSizeList>
      )}
    </AutoSizer>
)

有没有解决这个问题的方法？

4

0 回答 0