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

Bagaimana untuk Tatal ke Elemen dalam React?

Linda Hamilton
Lepaskan: 2024-11-14 09:37:02
asal
867 orang telah melayarinya

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>
    </>
  );
};
Salin selepas log masuk

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.
}
Salin selepas log masuk

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.
}
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
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 terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan