Bagaimana untuk Mengakses Elemen DOM dalam React: Panduan untuk Rujukan dan Amalan Terbaik?

Bagaimana untuk mengakses elemen DOM dalam React? Apakah persamaan document.getElementById() dalam React

Dalam artikel ini, kami akan meneroka kaedah untuk mengakses elemen DOM dalam React. React, perpustakaan JavaScript yang popular untuk membina antara muka pengguna, menawarkan pendekatan berbeza untuk mengurus DOM berbanding kaedah tradisional yang digunakan dalam JavaScript vanila. React menggunakan DOM maya, yang menjejaki keadaan UI, menjadikannya lebih mudah untuk mengemas kini dan mengurus UI secara deklaratif.

Jadi, bagaimana kita boleh mengakses elemen DOM tertentu dalam komponen React ? Secara tradisinya, dalam JavaScript vanila, kami bergantung pada kaedah seperti document.getElementById() untuk menyasarkan dan mendapatkan semula elemen DOM. Dalam React, terdapat beberapa pendekatan untuk mencapai matlamat ini dan ia telah berkembang dari semasa ke semasa dengan versi React yang berbeza.

Menggunakan Rujukan Rentetan (Ditamatkan):

Dalam versi React yang lebih lama, rujukan rentetan ialah biasa digunakan untuk mengakses elemen DOM. Begini cara ia berfungsi:

<progressbar completed="{25}"></progressbar>

Dalam contoh ini, atribut ref dengan nilai "Progress1" dilampirkan pada komponen Progressbar. Untuk mengakses elemen DOM, anda boleh menggunakan:

var object = this.refs.Progress1;

Walau bagaimanapun, kaedah ini dianggap warisan dan berkemungkinan akan dialih keluar dalam keluaran React akan datang. Facebook menasihatkan agar tidak menggunakan rujukan rentetan kerana isu yang berpotensi dan menggalakkan penggunaan kaedah alternatif.

Menggunakan Corak Panggilan Balik (Disyorkan untuk React 16.2 dan lebih awal):

Pendekatan yang disyorkan untuk React 16.2 dan lebih awal ialah menggunakan corak panggil balik, yang membenarkan akses kepada elemen DOM secara langsung dalam pemaparan komponen kaedah:

<progressbar completed="{25}"></progressbar>

Dalam contoh ini, atribut ref ditakrifkan sebagai fungsi anak panah yang menerima elemen DOM sebagai argumen (input dalam kes ini) dan memberikannya kepada tatasusunan dalam komponen. Ini membenarkan akses terus kepada elemen DOM dalam komponen.

Menggunakan React.createRef() (React 16.3 ):

Dalam React 16.3 dan versi yang lebih baru, React.createRef( ) digunakan untuk membuat rujukan. Anda biasanya menetapkan ref yang dibuat kepada pembolehubah contoh dalam pembina:

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

Untuk mengakses elemen DOM, anda boleh menggunakan:

const node = this.myRef.current;

Kaedah ini disyorkan untuk mengakses elemen DOM dalam React dan dianggap sebagai amalan terbaik.

Menggunakan React.forwardRef() dan useRef() (React 16.8 ):

Dalam komponen berfungsi yang diperkenalkan dalam React 16.8, anda boleh menggunakan React.forwardRef dengan useRef untuk mencipta rujukan dan mengakses elemen DOM. React.forwardRef digunakan untuk memajukan ref ke elemen DOM dan useRef digunakan untuk mencipta ref:

const Child = React.forwardRef((props, ref) => {
  return <div ref="{ref}">Child</div>;
});

const App = () => {
  const childRef = useRef(null);
  return <child ref="{childRef}"></child>;
};

Untuk mengakses elemen DOM, anda boleh menggunakan:

<progressbar completed="{25}"></progressbar>

Nota: Rujukan rentetan tidak digalakkan, jadi menggunakan mana-mana kaedah yang disyorkan di atas lebih diutamakan. React menawarkan pelbagai pilihan untuk mengakses elemen DOM dan pilihan bergantung pada versi React yang anda gunakan.

Atas ialah kandungan terperinci Bagaimana untuk Mengakses Elemen DOM dalam React: Panduan untuk Rujukan dan Amalan Terbaik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!