使用 React/Material UI 自动滚动到列表底部（显示输入的最新消息）

Question

我目前正在设计一个聊天机器人来发送销售查询消息，但无法使其自动滚动到列表底部。相反，会发生这种情况：

这是我用于映射所述消息的代码：

<List className={classes.messageArea}>
                                        {chatHistory.map(item => {
                                            return (
                                                <ListItem key={item}>
                                                    <Grid container>
                                                        <Grid item xs={12}
                                                              className={item.sent ? classes.msgsUs : classes.msgsScotti}>
                                                            <ListItemText align={item.sent ? "right" : "left"}
                                                                          primary={item.text}/>
                                                        </Grid>
                                                        <Grid item xs={item.sent ? 11 : 12}>
                                                            <ListItemText align={item.sent ? "right" : "left"}
                                                                          secondary={moment(item.time).format('HH:mm')}/>
                                                        </Grid>
                                                    </Grid>
                                                </ListItem>
                                            )
                                        })}
                                    </List>

当新消息发送时，如何让它自动滚动到底部，尝试了各种方法但没有完成任何任务。感谢您花时间查看此内容。

Answer 1

我给你举了一个例子。您需要做的主要事情是设置对列表状态更改的依赖关系。发生这种情况时，您需要滚动窗口。一种方法是使用 Element.scrollIntoView() 函数。

我在这里包含了完整的示例： https: //codesandbox.io/s/confident-microservice-vibw8 ?file=/src/App.js

主要部分在这里，只要列表发生变化，我们就运行 API 函数：

useEffect(() => {
  if (scrollRef.current) {
    scrollRef.current.scrollIntoView({ behaviour: "smooth" });
  }
}, [list]);