从下到上显示聊天消息

问题描述

我正在开发虚拟化消息的聊天。它可以很好地用作普通列表。

现在我正在尝试“风格化”消息，使其自下而上（例如 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

解决方法

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

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

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

示例：

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

类似的东西？