reactjs - 使用 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>

我如何让它在发送新消息时自动滚动到底部，尝试了各种方法但没有完成任何事情。感谢您花时间看这个。

标签： reactjsscrollmaterial-ui

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]);