Bagaimana untuk Menatal dengan Cekap ke Elemen dalam Reaksi?

Menatal ke Elemen dalam React dengan Cekap

Dalam artikel ini, kami menangani cabaran biasa yang dihadapi semasa menguruskan kelakuan tatal dalam aplikasi React: memastikan fokus tatal kekal pada yang baru dimuatkan elemen. Kami mengemukakan pendekatan yang berbeza untuk mencapai matlamat ini, sesuai untuk React 16.3 dan 16.8 .

React 16.8 , Komponen Fungsian

Menggunakan cangkuk useRef, kami mencipta ref untuk elemen yang diingini. Dengan menggunakan fungsi scrollIntoView yang terikat pada ref ini, kami menatal dengan lancar ke elemen tersebut.

const ScrollDemo = () => {
  const myRef = useRef(null);

  const executeScroll = () => myRef.current.scrollIntoView(); // scroll to element

  return (
    <>
      <div ref={myRef}>Element to scroll to</div>
      <button onClick={executeScroll}>Click to scroll</button>
    </>
  );
};

React 16.3 , Komponen Kelas

Untuk komponen kelas, kita boleh mencipta ref dengan React.createRef (). Kaedah executeScroll menggunakan fungsi scrollIntoView pada ref untuk menatal dengan lancar ke elemen yang dikehendaki.

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(); // scroll to element
}

Ref Callback

Sebagai alternatif, kita boleh menggunakan ref callback untuk melampirkan ref pada elemen . Kaedah ini memastikan bahawa rujukan ditetapkan terus kepada elemen DOM tanpa membuat pembolehubah tika.

class ReadyToScroll extends Component {
  render() {
    return <div ref={ref => (this.myRef = ref)}>Element to scroll to</div>;
  }

  executeScroll = () => this.myRef.scrollIntoView(); // scroll to element
}

Pertimbangan

• Elak Rujukan Rentetan: Rujukan rentetan mempunyai implikasi prestasi dan tidak digalakkan oleh Bertindak balas.
• Animasi Tatal Lancar: Tatal lancar boleh didayakan dengan menambahkan gelagat tatal: licin pada CSS elemen html.
• Mengirim Rujuk kepada Kanak-kanak : Apabila menghantar ref kepada komponen anak, tetapkan ia pada prop dengan nama lain daripada "rujuk" untuk mengelakkan konflik.

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