Bagaimanakah Saya Boleh Mengakses Elemen DOM dalam React?

Mengakses Elemen DOM dalam React

Bagaimana untuk Mendapatkan Elemen DOM dalam React?

Dalam React, mengakses elemen DOM ialah tidak semudah menggunakan getElementById() dalam JavaScript tradisional. React mengendalikan manipulasi DOM secara berbeza, mengutamakan prestasi dan perbezaan DOM maya.

React Refs

Untuk mengakses elemen DOM dalam React, anda perlu menggunakan ref. Rujukan ialah cara untuk React mengekalkan rujukan kepada elemen DOM yang dibuat oleh komponen React. Terdapat pelbagai cara untuk mencipta rujukan dalam React:

• Rujukan Rentetan (Legasi):
  Dalam versi React yang lebih lama, anda boleh menggunakan rujukan rentetan untuk mengakses elemen dengan menetapkan atribut ref kepada rentetan. Walau bagaimanapun, pendekatan ini tidak digalakkan dan mungkin dialih keluar dalam versi masa hadapan.

• Rujukan Panggilan Balik:
  Pendekatan yang disyorkan ialah menggunakan rujukan panggilan balik. Dengan rujukan panggil balik, anda menghantar fungsi panggil balik sebagai nilai atribut ref. Fungsi menerima elemen DOM sebagai hujahnya.

  Contoh:

  <Progressbar completed={25}>

  Salin selepas log masuk

• React.createRef (Komponen Fungsian):
  Untuk komponen berfungsi yang diperkenalkan dalam React 16.8, anda boleh menggunakan React.createRef(). Ini mengembalikan objek ref yang boleh anda tetapkan kepada atribut.

  Contoh:

  const myRef = React.createRef();
  
  const handleClick = () => {
    const node = myRef.current;
  }
  
  return <div ref={myRef} onClick={handleClick} />;

  Salin selepas log masuk

Mengakses Elemen

Setelah anda membuat rujukan, anda boleh mengakses elemen DOM sebagai berikut:

• Ruj Rentetan Warisan:
  this.refs.elementName
• Panggil balik Ruj:
  this.elementName
• React.createRef:
  refObject.current

Contohnya:

const node = this.refs.Progress1;
const node = this.Progress[0];
const node = myRef.current;

Dalam kes khusus anda, anda boleh menggunakan rujukan panggil balik untuk mengakses elemen bar kemajuan dan melaksanakan fungsi handleClick10:

handleClick10 = (e) => {
    const progressElement = this.refs[this.state.baction];
    if (progressElement) {
        progressElement.addPrecent(10);
    }
};

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengakses Elemen DOM dalam React?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!