Estoy usando la ventana de reacción para generar una lista larga para mostrar mensajes. pero, ¿cómo puedo desplazarme hacia abajo para cada mensaje nuevo?
Podría manejarlo para Div normal usando useRef, pero ¿qué pasa con la ventana de reacción?
const list = useRef<HTMLDivElement>(document.createElement('div')); useEffect(() => { list.current.scrollTop = list.current.scrollHeight; }, [message]);y:
<FixedSizeList width="100%" height={500} itemCount={messages.length} itemSize={40} itemData={messages} > {Row} </FixedSizeList>Crearía una referencia para adjuntarla a FixedSizeList , luego crearía una función que se desplaza hasta el final de esa lista y tiene un efecto que escucha cuando se agrega un nuevo elemento a la lista. Algo como:
function ListComponent({ messages }) { const listRef = useRef(null); const scrollToBottom = () => listRef?.current.scrollToItem(messages.length); useEffect(() => { scrollToBottom(); }, [messages]); return ( <FixedSizeList width="100%" height={500} itemCount={messages.length} itemSize={40} itemData={messages} ref={listRef} > {Row} </FixedSizeList> ); }