Cara Memilih Elemen DOM dalam React: Alternatif kepada `document.getElementById()`?

Bagaimana untuk Memilih Elemen DOM dalam React? Apakah Setara dengan document.getElementById() dalam React

Dalam React, tidak seperti bekerja dengan JavaScript vanila, mengakses elemen DOM secara langsung adalah berbeza. React menggunakan DOM maya untuk mengemas kini DOM sebenar dengan cekap, ini menjadikannya berbeza daripada JavaScript vanila.

Cara Mengakses Elemen DOM

Pilihan 1: Menggunakan Rujukan

• Gunakan Rujukan dengan Komponen Fungsi:(v16.8.0) Gunakan useRef dan forwardRef. Tentukan ref dengan useRef dan kemudian majukannya ke elemen DOM menggunakan forwardRef. Untuk mengakses elemen, gunakan sifat semasa ref (ref.current).

Pilihan 2: Menggunakan React.createRef (v16.3 )

• Buat ref menggunakan React.createRef() dan lampirkan pada elemen untuk mengaksesnya kemudian. Gunakan ref.current untuk mendapatkan nod DOM.

Pilihan 3: Menggunakan Corak Panggilan Balik (Legasi)

• Tentukan atribut ref dalam JSX elemen dan lulus fungsi panggil balik yang menerima rujukan kepada DOM elemen.

Pilihan 4: Menggunakan Rujukan Rentetan (Legasi)

• Gunakan rujukan rentetan dengan menetapkan atribut ref kepada rentetan yang mengenal pasti elemen DOM . Akses elemen menggunakan this.refs.[stringRef].

Contoh

Di bawah ialah contoh menggunakan corak panggil balik untuk memilih elemen DOM:

  render() {
    return (
      <div>
        <Progressbar
          completed={25}
         >

Untuk mengakses elemen, anda boleh menggunakan this.progressBars[0], this.progressBars[1] dan this.progressBars[2] untuk melaksanakan operasi padanya.

Atas ialah kandungan terperinci Cara Memilih Elemen DOM dalam React: Alternatif kepada `document.getElementById()`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!