Bagaimanakah Saya Mengakses Elemen DOM dalam React Tanpa Menggunakan `document.getElementById()`?

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

Mengakses elemen DOM dalam React berbeza daripada kaedah document.getElementById() konvensional dalam JavaScript vanila. React menyediakan beberapa pendekatan untuk memilih elemen DOM.

React Refs

Refs membenarkan anda membuat rujukan kepada elemen DOM dalam komponen React. Rujukan ini boleh digunakan kemudian untuk mengakses nod DOM.

Corak Panggilan Balik (Disyorkan)

Dalam React 16.2 dan lebih awal, cara yang disyorkan untuk menggunakan rujukan adalah melalui corak panggil balik:

<Progressbar completed={25}>

Ini mencipta fungsi panggil balik yang menerima nod DOM sebagai hujah dan memberikannya kepada tatasusunan Progress dalam keadaan komponen.

Rujukan Rentetan

Rujukan rentetan dianggap warisan dan tidak disyorkan untuk digunakan. Walau bagaimanapun, ia masih boleh digunakan dalam versi lama React.

<Progressbar completed={25}>

Untuk mengakses elemen DOM, gunakan:

var object = this.refs.Progress1;

Perhatikan bahawa rujukan rentetan mungkin dialih keluar dalam keluaran akan datang React.

React.createRef()

Dalam React 16.3 dan lebih baru, gunakan React.createRef() untuk mencipta ref.

constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }

Untuk mengakses elemen DOM, gunakan:

const node = this.myRef.current;

React Hook: useRef

Dalam komponen fungsi ( diperkenalkan dalam React 16.8), gunakan cangkuk useRef untuk mencipta ref.

const childRef = useRef(null);
return <div ref={childRef} />;

Untuk akses elemen DOM, gunakan:

const node = childRef.current;

Dengan menggunakan kaedah ini, anda boleh mengakses dan memanipulasi elemen DOM dalam komponen React, membenarkan kawalan yang lebih terperinci ke atas interaksi dan kefungsian aplikasi web anda.

Atas ialah kandungan terperinci Bagaimanakah Saya Mengakses Elemen DOM dalam React Tanpa Menggunakan `document.getElementById()`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!