Автоматическая c прокрутка списка до конца (отображение последних введенных сообщений) с помощью пользовательского интерфейса React / Material

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