根据内容高度设置React-Window项目大小

Question

我正在使用react-window实现聊天消息列表，但是我在尝试为每个条目设置正确的“itemSize”时遇到了困难。由于聊天消息基于其文本长度和窗口宽度，不总是有固定高度（或者我可以简单计算出高度），因此会发生这种情况。

我目前正在使用VariableSizeList，代码如下：

<AutoSizer>
    {({ height, width }) => (
       <List
        height={height}
        itemCount={messages.length}
        itemSize={(index) => messages[index].isReply ? 118 : 79} /* THIS IS CURRENTLY WRONG, DOESN'T PICK ALL CASES!*/
        width={width}
       >
         {({ index, style }) => (
           <ChatMessage
            key={index}
            style={style}
            ...
           />
         )}
       </List>
    )}

有没有一种方法可以将列表行的项高度设置为其内容的实际高度？

- Marco Nobile

---

你是否曾经找到了一个可行的解决方案？ - Mutu A.

Answer 1

这有点棘手，而且不是官方支持的 react-window，正如this issue中所讨论的。显然，一种欺骗的方法是使用Element.getBoundingClientRect().height并通过itemSize设置此Element的大小。这里提供了一个示例 https://codesandbox.io/s/dynamic-size-of-react-window-list-items-64o9p?file=/src/ChatMessage.js

- prohit