Bagaimana untuk Tatal ke Bahagian Bawah Widget Sembang dalam React?

Cara Tatal ke Elemen dalam React

Dalam artikel ini, kami akan menangani isu biasa di mana bar skrol widget sembang kekal di bahagian atas apabila mesej baharu memuatkan. Matlamat kami adalah untuk memfokuskan bar skrol pada elemen mesej terakhir daripada tatasusunan sebelumnya.

Penyelesaian

Untuk menyelesaikan isu ini, kami perlu:

1. Mencipta dinamik rujukan dengan menghantar indeks kepada komponen yang memaparkan elemen mesej.
2. Gunakan fungsi tatal yang sesuai yang menatal ke elemen yang dikehendaki.

React 16.8 , Komponen Berfungsi:

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

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

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

Komponen Kelas - Ruj Panggilan balik:

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

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

Nota Penting:

• Elakkan menggunakan ref rentetan kerana ia merendahkan prestasi dan kebolehkomposisian.
• Untuk animasi tatal yang lebih lancar, tambahkan yang berikut CSS:

html {
  scroll-behavior: smooth;
}

• Apabila menghantar ref kepada komponen kanak-kanak, namakan prop secara berbeza untuk mengelakkan konflik dengan prop "ref" asli.

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