Bagaimanakah cara saya menatal ke elemen dalam React?

Menatal ke Elemen dalam React

Dalam React, pembangun mungkin menghadapi situasi di mana mereka ingin menatal ke elemen tertentu secara dinamik, seperti dalam widget sembang yang baru mesej yang dimuatkan harus difokuskan. Untuk mencapai matlamat ini, beberapa teknik boleh digunakan:

React 16.8 , Komponen Berfungsi

Menggunakan cangkuk useRef, anda boleh mencipta rujukan dinamik kepada elemen yang ingin anda tatal ke:

const myRef = useRef(null);

const executeScroll = () => myRef.current.scrollIntoView();

Setelah rujukan diwujudkan, anda boleh menggunakan fungsi executeScroll() daripada pengendali acara atau dalam kesan untuk melakukan penatalan.

React 16.3 , Komponen Kelas

Untuk komponen kelas, anda mempunyai dua pilihan:

Pilihan 1: Menggunakan createRef

constructor(props) {
  super(props)
  this.myRef = React.createRef()  
}

Pilihan 2: Ruj Panggilan balik

render() {
  return <div ref={ (ref) => this.myRef=ref }></div>
}

Dalam kedua-dua kes, anda boleh menggunakan this.myRef.scrollIntoView() untuk menatal ke elemen.

Kaveat

• Elakkan menggunakan rujukan rentetan kerana ia tidak digunakan lagi dan boleh menjejaskan prestasi.
• Dayakan penatalan lancar dengan menambahkan CSS berikut kepada dokumen:

html {
  scroll-behavior: smooth;
}

Meluluskan Ruj kepada Komponen Kanak-kanak

Jika elemen yang anda ingin tatal terletak dalam komponen kanak-kanak, anda boleh menggunakan yang berikut teknik:

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

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

Atas ialah kandungan terperinci Bagaimanakah cara saya menatal ke elemen dalam React?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!