根据内容的长度调整列表项的高度？

Question

我正在使用react material-ui，发现使用List组件时，性能会严重下降（超过约1000个数据项）。所以我一直在使用react-virtualized。对我来说，react-virtualized显示了出色的性能，但是有一个问题。

我的目标是显示文本列表，但是如果文本的长度太长，则会侵入底部项目的位置。我想自动调整列表项的高度，如果可能的话，甚至可以在响应式网络上正确显示它们。

下面是我的代码。来自react-virtualized，但来自Material-ui。这是因为我认为与性能问题无关。如果有问题，希望您能向我提及。

<AutoSizer disableHeight>
  {({ width }) => (
    <List
      height={300}
      width={width}
      overscanRowCount={10}
      rowCount={texts.length}
      rowHeight={50} // I want to change this value depending on the length of the content.
      rowRenderer={
        ({ index, key, style }) => {
          return (
            <div style={style} key={key} >
              <ListItem divider={true} >
                <ListItemText primary={texts[index]} />
              </ListItem>
            </div>
          )
        }
      }
    />
  )}
</AutoSizer>