Реагируйте на бесконечную прокрутку в стиле чата - PullRequest
Новая
       95

Реагируйте на бесконечную прокрутку в стиле чата

0 голосов
/ 06 августа 2020

Я использую react-inifinite-scroller на моей странице личных сообщений.

Все работает нормально, за исключением того, что все сообщения загружаются, потому что полоса прокрутки находится наверху после каждого рендеринга.

Я пробовал прокрутить вниз в useLayoutEffect, но это все равно не работает.

Вот код функционального компонента окна чата: 

const boxRef = useRef(null);

useLayoutEffect(() => {
        if (boxRef.current) {
            boxRef.current.scrollTop = boxRef.current.scrollHeight;
        }
});

<div ref={boxRef}>
                <InfiniteScroll
                    pageStart={0}
                    loadMore={loadMoreMessages}
                    hasMore={!isLoading && hasMore}
                    isReverse
                    initialLoad
                >
                    {
                        messages.map(m => {
                            ...
                        })
                    }
                </InfiniteScroll>
</div>

loadMoreMessages is действие redux для запроса дополнительных сообщений из базы данных и состояния обновления.

Есть идеи?

...