Anda mahu widget sembang anda memfokus secara automatik pada mesej terakhir apabila mesej baharu dimuatkan. Untuk mencapai matlamat ini, anda perlu mencipta rujukan dinamik untuk setiap mesej dan menggunakan fungsi tatal untuk menatal ke elemen terakhir.
Begini cara anda boleh melakukannya:
const ScrollDemo = () => { const myRef = useRef(null); const executeScroll = () => myRef.current.scrollIntoView(); // run this function from an event handler or an effect to execute scroll return ( <> <div ref={myRef}>Element to scroll to</div> <button onClick={executeScroll}>Click to scroll</button> </> ); };
class ReadyToScroll extends Component { constructor(props) { super(props); this.myRef = React.createRef(); } render() { return <div ref={this.myRef}>Element to scroll to</div>; } executeScroll = () => this.myRef.current.scrollIntoView(); // run this method to execute scrolling. }
class ReadyToScroll extends Component { render() { return ( <div ref={(ref) => (this.myRef = ref)}>Element to scroll to</div> ); } executeScroll = () => this.myRef.scrollIntoView(); // run this method to execute scrolling. }
Atas ialah kandungan terperinci Bagaimana untuk Tatal ke Elemen dalam React?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!