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

Question

我正在使用反应窗口来实现聊天消息列表，但我在尝试为每个项目设置权限时遇到了困难itemSize。碰巧的是，基于文本长度和窗口宽度的聊天消息并不总是有前缀高度（或者我可以用简单的方式计算的高度）。

我目前正在使用 aVariableSizeList并且代码如下所示

<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>
    )}

有没有办法将列表行的项目高度设置为其内容的实际高度？

Answer 1

这有点棘手，并且没有得到本期react-window讨论的正式支持。显然，解决这个问题的一种方法是使用并设置此via的大小。这里给出一个例子https://codesandbox.io/s/dynamic-size-of-react-window-list-items-64o9p?file=/src/ChatMessage.jsElement.getBoundingClientRect().heightElementitemSize