Bagaimana untuk menguruskan berbilang rujukan untuk pelbagai elemen dalam React menggunakan cangkuk?

Rujukan Berbilang untuk Tatasusunan Elemen Menggunakan Cangkuk

Dalam React, cangkuk useRef membenarkan pembangun mengurus rujukan DOM kepada elemen. Biasanya, rujukan digunakan untuk mengakses satu elemen. Walau bagaimanapun, pendekatan ini mungkin tidak sesuai untuk tatasusunan elemen.

Untuk bekerja dengan berbilang rujukan bagi tatasusunan elemen menggunakan cangkuk, pendekatan yang sedikit berbeza diperlukan. Mari kita pertimbangkan situasi berikut:

<code class="javascript">const { useRef, useState, useEffect } = React;

const App = () => {
  const elRef = useRef();
  const [elWidth, setElWidth] = useState();

  useEffect(() => {
    setElWidth(elRef.current.offsetWidth);
  }, []);

  return (
    <div>
      {[1, 2, 3].map(el => (
        <div ref={elRef} style={{ width: `${el * 100}px` }}>
          Width is: {elWidth}
        </div>
      ))}
    </div>
  );
};</code>

Dalam contoh ini, kami cuba mencipta berbilang rujukan dengan hanya menghantar elRef yang sama kepada setiap elemen dalam tatasusunan. Walau bagaimanapun, pendekatan ini akan menyebabkan hanya elemen terakhir dirujuk.

Untuk mengatasi isu ini, kami boleh memanfaatkan teknik berikut:

<code class="javascript">const App = props => {
  const itemsRef = useRef([]);
  // you can access the elements with itemsRef.current[n]

  useEffect(() => {
    itemsRef.current = itemsRef.current.slice(0, props.items.length);
  }, [props.items]);

  return props.items.map((item, i) => (
    <div
      key={i}
      ref={el => (itemsRef.current[i] = el)}
      style={{ width: `${(i + 1) * 100}px` }}
    >
      ...
    </div>
  ));
};</code>

Dalam penyelesaian yang dipertingkatkan ini, kami menggunakan itemsRef tatasusunan untuk memegang rujukan. Kami memulakan tatasusunan dengan tatasusunan kosong. Dalam useEffect, kami mengemas kini tatasusunan itemsRef agar sepadan dengan panjang tatasusunan props.items. Ini memastikan bahawa kita mempunyai rujukan yang sepadan untuk setiap item dalam tatasusunan.

Kini, kita boleh mengakses rujukan elemen individu menggunakan itemsRef.current[n], dengan n ialah indeks unsur dalam tatasusunan.

Atas ialah kandungan terperinci Bagaimana untuk menguruskan berbilang rujukan untuk pelbagai elemen dalam React menggunakan cangkuk?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!