Как добавить скролл элементу React?

Делаю компонент чата и хочу чтобы он сразу "скроллил" вниз к последним сообщениям. Пытался сделать это с помощью рефом, не помогло. Всё дело в том что элемент показывается с задержкой(из-за запросов к серверу) и реф перестаёт работать. Что делать?
const Chat = () => {
    const dispatch = useDispatch()
    const chatRef = useRef()
    const chat = useSelector(state => state.chat);
    const loading = useSelector(state => state.main.loading);
    useEffect(() => {
        dispatch(getChat())
    }, [])
    useEffect(() => {
        if(!loading && chat.messages) chatRef.current.scrollTo(0, 100)
    }, [chat])
	return (
		<div>
{loading ? 'loading':
        <div className="mt-3">
                <div>
                    <div ref={chatRef} style={{height: '65vh', overflow:'auto'}} >
                        {chat.messages.map(item => 
                                <p>{item.username}: {item.text}</p>
                        )}
                    </div>
                </div>
        </div>
            }
</div>
	)
}	

export default Chat;
  • Вопрос задан
  • 89 просмотров
Решения вопроса 1
@sakhnyuk
Добавь в зависимости эффекта loading и опускайся вниз на высоту скрола.
Убедить, что chat.messages бывает falsy (если это пустой массив, то проверяй как chat.messages.length).

useEffect(() => {
        if (!loading && chat.messages && chat.messages.length) {
            chatRef.current.scrollTop = chatRef.current.scrollHeight
        };
    }, [chat, loading])
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
28 сент. 2020, в 00:10
15000 руб./за проект
27 сент. 2020, в 21:54
15000 руб./за проект