Bagaimana untuk Tatal Secara Automatik ke Elemen Tertentu dalam React?

Bagaimana hendak Tatal Secara Automatik ke Elemen Tertentu?

Masalah:

Dalam widget sembang, mesej baharu sepatutnya secara automatik tatal ke dalam paparan semasa pengguna menatal ke atas. Walau bagaimanapun, penggelangsar kekal di bahagian atas apabila mesej baharu dimuatkan, menjadikannya sukar untuk melihat yang terbaharu.

Penyelesaian:

Untuk menatal ke elemen tertentu apabila mesej baharu ditambahkan, ikut langkah berikut:

React 16.8 , Fungsional komponen

const ScrollDemo = () => {
  const myRef = useRef(null);
  const executeScroll = () => myRef.current.scrollIntoView(); // Run this function 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
}

Elakkan Rujukan Rentetan:

Rujukan rentetan tidak digalakkan kerana isu prestasi, kekurangan kebolehkomposisian dan kemungkinan dialih keluar dalam keluaran React akan datang.

Pilihan: Animasi Tatal Lancar:

Untuk pengalaman menatal yang lancar, tambahkan CSS berikut pada elemen html:

html {
  scroll-behavior: smooth;
}

Melalukan Ruj kepada a Kanak-kanak:

Untuk melampirkan ref pada elemen DOM tertentu dalam komponen kanak-kanak:

const MyComponent = () => {
  const myRef = useRef(null);
  return <ChildComp refProp={myRef} />;
};

Dalam komponen ChildComp:

const ChildComp = (props) => {
  return <div ref={props.refProp} />;
};

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