Tengo un componente de Message que muestra todos los mensajes (entrantes y salientes) en un hilo.
Me gustaría que el último mensaje/un mensaje recién escrito/un mensaje entrante aparezca siempre al final de la conversación. Algo así como lo que hacen todas las aplicaciones de chat/mensajería.
Aquí está mi código:
import React, { useRef } from "react"; const dummy = useRef(); ... dummy?.current?.scrollIntoView(true, { behaviour: "auto", }); ... <div className=""> <Paper elevation={0} sx={{ backgroundColor: "#fafafa", maxHeight: 200, overflow: "auto", }} > {messages.map((message, idx) => ( <div key={idx} ref={dummy}> <Message message={message} name={name} /> </div> ))} {/* I tried this also <div ref={dummy}></div> */} </Paper> </div> Quiero que todos los mensajes que puedan caber en el div principal con maxHeight: 200 se muestren con el último mensaje justo en la parte inferior cuando hago clic en la conversación/hilo. Actualmente, TODA la página se desplaza hacia abajo en lugar de solo los mensajes en el hilo. La página debe permanecer estacionaria.
¿Cómo hago esto?
El problema es que está pasando la ref al elemento div en el que se representa el componente Message . Le sugiero que use un div ficticio al final de su chat y luego se desplace hacia él cada vez que se actualice su componente.
return ( <div className="messagesWrapper" style={{ background: "white", border: "2px red solid" }} > {messages.map((message) => ( <span key={message}>{message}</span> ))} <div ref={dummy} /> </div> );El elemento ref se actualiza en useEffect.
const dummy = useRef(null); useEffect(() => { dummy.current.scrollIntoView({ behavior: "smooth" }); }, [messages]);Adjuntar una caja de arena para referencia.
Creo que esto funcionará:
React.useEffect(() => { dummy.current.scrollTop = dummy.current.scrollHeight })Entonces, lo que puede hacer es crear un useRef y luego iniciarlo como nulo
Luego, cuando .mapee sobre su matriz para representar los objetos, ejecute una función para verificar si es el último elemento de la matriz
Si es el último objeto de la matriz, adjunte la referencia.
Luego tenga un useEffect con la referencia en la matriz de dependencia
Si useRef get se establece con un nuevo valor, desde .map, en su useEffect, tenga un comportamiento scrollTo, suave, función que se desplaza hacia él