Rumah >hujung hadapan web >tutorial js >Bagaimana untuk Tatal ke Elemen dalam React?

Bagaimana untuk Tatal ke Elemen dalam React?

Linda Hamilton
Linda Hamiltonasal
2024-11-14 09:37:02873semak imbas

How to Scroll to an Element in 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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya:Mitos Biasa Mengenai LuwakArtikel seterusnya:Mitos Biasa Mengenai Luwak