Bagaimana untuk Memanipulasi Secara Terus Unsur Reaksi Tertentu Menggunakan Ruj?

Cara Melaksanakan Operasi pada Elemen Reaksi Tertentu

Apabila bekerja dengan elemen DOM dalam React, adalah perkara biasa untuk menghadapi keperluan untuk memilih dan mengendalikan elemen khusus untuk memanipulasi antara muka pengguna. Dalam kes ini, matlamatnya adalah untuk mengemas kini komponen bar kemajuan berdasarkan pemilihan pengguna.

Kod Refactor untuk Menggunakan Ruj

Untuk mengakses elemen DOM dalam React, kami boleh menggunakan konsep " rujukan." Rujukan menyediakan mekanisme untuk membuat rujukan kepada elemen tertentu dalam pepohon komponen, membolehkan akses terus kepada sifat dan kaedahnya.

Dalam React 16.8 (Komponen Fungsi):

// Define the ref for the child component
const ChildRef = useRef(null);

// Forward the ref to the child component with React.forwardRef()
const Child = React.forwardRef((props, ref) => {
  // Receive and store the forwarded ref in useRef()
  ChildRef.current = ref;
  
  return <div>Child Component</div>;
});

Dalam React 16.3 (Kelas Komponen):

// Create a ref for the component instance
this.myRef = React.createRef();

// Pass the ref to the element within the render method
render() {
  return <div ref={this.myRef} />;
}

Akses Elemen Dirujuk:

Setelah rujukan ditubuhkan, kami boleh mengakses elemen DOM menggunakan:

const element = this.myRef.current;

Lakukan Operasi pada Elemen Terpilih

Dengan akses kepada elemen yang diingini, anda kini boleh melakukan operasi yang diperlukan. Dalam kes anda, anda ingin melaksanakan fungsi addPrecent untuk mengemas kini peratusan lengkap bar kemajuan.

document.getElementById(this.state.baction).addPrecent(10);

Kaedah Warisan (Tidak Disyorkan)

Kaedah warisan untuk mengakses elemen DOM termasuk menggunakan rujukan rentetan atau rujukan balik:

String Rujukan:

<Progressbar completed={25}>

Rujukan Panggilan Balik:

<Progressbar completed={25}>

Walau bagaimanapun, kaedah ini tidak digalakkan kerana isu yang berpotensi dan berkemungkinan akan dialih keluar pada masa hadapan Versi React.

Dengan memasukkan rujukan, anda boleh memilih dan mengendalikan elemen DOM tertentu dengan berkesan, mempertingkatkan interaktiviti dan fleksibiliti aplikasi React anda.

Atas ialah kandungan terperinci Bagaimana untuk Memanipulasi Secara Terus Unsur Reaksi Tertentu Menggunakan Ruj?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!