从下到上显示聊天消息

Question

我正在开发一个虚拟化消息的聊天。它可以作为普通列表使用。

现在我正在尝试“样式化”自下而上的消息（例如 Whatsapp、Telegram 和每个消息应用程序都可以使用）。

我在父级上添加了display: flex、flex-direction: column、justify-content: flex-end，如下面的代码所示。

编辑：我还在消息中添加了display: flex、flex-direction: column-reverse，因此它们的顺序已经正确。问题是他们在聊天中的位置，与底部的输入有关。

我还在带有 flexbox 和 AutoSizer 的父级之间放置了一个 div，因为它是 React 虚拟化文档所必需的。

<div style={{ position: 'relative', minHeight: '100%', display: 'flex', justifyContent: 'flex-end', flexDirection: 'column' }} >
            <div style={{ flex: '1 1 auto' }}>
                <AutoSizer onResize={scrollToBottom}>
                    {({ width, height }) => (
                        <List
                            ref={ListRef}
                            deferredMeasurementCache={_cache.current}
                            width={width}
                            height={height}
                            overscanRowCount={props.overscanRowCount}
                            noRowsRenderer={_noRowsRenderer}
                            rowCount={xRowCount}
                            rowHeight={_cache.current.rowHeight}
                            rowRenderer={_rowRenderer}
                            scrollToIndex={xRowCount}
                        />
                    )}
                </AutoSizer>
            </div>
        </div>

如 React 虚拟化文档中所述：

关于将 AutoSizer 与 flexbox 容器一起使用的注意事项。 Flex 容器不会阻止他们的孩子成长，而 AutoSizer 会贪婪地成长以尽可能多地填充空间。将两者结合起来可能会导致循环。解决此问题的简单方法是将 AutoSizer 嵌套在块元素（如 a ）中，而不是将其作为 flex 容器的直接子元素。

问题是：没有应用 flex-end 样式。该列表从上到下都像以前一样工作。

有没有其他方法可以做到这一点？如果是这样，我愿意这样做。如果是这样的话，有谁知道问题出在哪里？

编辑：我为这个问题创建了一个演示：https://codesandbox.io/s/flexendreactvirtualize-hospg

Answer 1

React 虚拟化位置项绝对，style 传入rowRenderer 参数。不建议用 css 覆盖它。

建议，而不是尝试使用 css 解决顺序（如果您需要更改样式，请覆盖提供的 style 对象），这是我的建议：

使用rowRenderer 的index 属性显示正确的项目。

例子：

const _rowRenderer = (index, ...delegate) => {
   // instead of `myItems[index]` to invert order
   const item = myItems[myItems.length - 1 - index]
   return <ItemDisplay item={item} {...delegate} />
}

类似的东西？