Bagaimanakah Saya Boleh Menggunakan Rujukan Berbilang untuk Susunan Elemen dengan Cangkuk Reaksi?

Bagaimanakah Saya Boleh Menggunakan Rujukan Berbilang untuk Susunan Elemen dengan Cangkuk?

Pengenalan

Rujuk menyediakan cara untuk akses elemen HTML dalam komponen React. Walaupun anda boleh menggunakan rujukan untuk mengurus elemen tunggal, mungkin terdapat situasi di mana anda perlu menggunakan rujukan pada tatasusunan elemen. Artikel ini meneroka cara melaksanakan berbilang rujukan untuk tatasusunan elemen menggunakan cangkuk dalam React.

Ruj Elemen Tunggal

Menggunakan rujukan untuk satu elemen adalah mudah:

<code class="javascript">const elRef = useRef();
const [elWidth, setElWidth] = useState();

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

Ruj Array Elemen

Menggunakan pendekatan di atas pada tatasusunan elemen tidak akan berfungsi kerana ia memberikan rujukan yang sama kepada semua elemen. Sebaliknya, kita perlu mencipta tatasusunan rujukan dan menetapkannya secara individu kepada setiap elemen:

<code class="javascript">const itemsRef = useRef([]);

// Initialize the array of refs
useEffect(() => {
  itemsRef.current = itemsRef.current.slice(0, props.items.length);
}, [props.items]);

// Use the array of refs in JSX
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 ini, itemsRef.current ialah tatasusunan rujukan kepada elemen HTML. Anda boleh mengakses elemen individu dengan mengindeks tatasusunan, cth., itemsRef.current[0].

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggunakan Rujukan Berbilang untuk Susunan Elemen dengan Cangkuk Reaksi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!