react-window 根據內容高度設置項目大小

Question

我正在使用 react-window 來實現一個聊天消息列表，但是我在嘗試為每個項目設置正確的itemSize時遇到了困難。 碰巧的是，基於他的文本長度和 window 寬度的聊天消息並不總是前綴高度（或我可以以簡單方式計算的高度）。

我目前正在使用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>
    )}

有沒有辦法將列表行的項目高度設置為其內容的實際高度？

Answer 1

這有點棘手，並且沒有得到本期討論的react-window的官方支持。 顯然，一種欺騙方法是使用Element.getBoundingClientRect().height並通過itemSize設置此Element的大小。 這里給出了一個例子https://codesandbox.io/s/dynamic-size-of-react-window-list-items-64o9p?file=/src/ChatMessage.js