Bagaimana untuk Tatal ke Elemen dalam React?

Bagaimana hendak menatal ke elemen?

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:

React 16.8 , Komponen berfungsi

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>
    </>
  );
};

React 16.3 , Komponen kelas

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.
}

Komponen kelas - Rujuk panggil balik

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.
}

Nota:

• Elakkan menggunakan rujukan rentetan kerana ia tidak digunakan lagi.
• Lepaskan ref kepada elemen DOM, bukan kepada komponen React.
• Tambah CSS untuk mendayakan animasi tatal yang lancar.

Atas ialah kandungan terperinci Bagaimana untuk Tatal ke Elemen dalam React?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!