Bagaimana untuk Melaksanakan Rujukan Berbilang untuk Susunan Elemen dengan Cangkuk Reaksi?

Menggunakan Rujukan Berbilang untuk Susunan Elemen dengan Cangkuk

Soalan:

Bagaimana boleh berbilang rujukan dilaksanakan untuk tatasusunan elemen menggunakan API cangkuk React?

Latar Belakang:

Menggunakan rujukan untuk satu elemen adalah mudah, tetapi memanjangkannya kepada tatasusunan elemen memerlukan pendekatan yang berbeza.

Penyelesaian Cadangan:

Memandangkan cangkuk tidak boleh digunakan dalam gelung, pendekatan tersuai diperlukan:

Langkah 1: Buat Tatasusunan Rujukan

Mulakan dengan mencipta objek ref yang akan menyimpan senarai rujukan.

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

Langkah 2: Rujukan Elemen Akses

Setiap elemen dalam tatasusunan boleh diakses menggunakan indeks:

<code class="javascript">itemsRef.current[n] // nth element's ref</code>

Langkah 3: Kemas kini Ruj Array pada Array Change

Pastikan tatasusunan ref kekal disegerakkan dengan tatasusunan elemen. Ini boleh dilakukan dalam cangkuk useEffect:

<code class="javascript">useEffect(() => {
  itemsRef.current = itemsRef.current.slice(0, props.items.length);
}, [props.items]);</code>

Langkah 4: Berikan Rujukan kepada Elemen Tatasusunan

Apabila mencipta elemen, tetapkan rujukan yang sesuai kepada setiap satu :

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

Dengan mengikuti langkah ini, anda boleh berjaya menggunakan berbilang rujukan untuk susunan elemen dengan cangkuk.

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