Bagaimana Menggunakan Rujukan Berbilang untuk Susunan Elemen dengan Cangkuk Reaksi?

Menggunakan Rujukan Berbilang untuk Susunan Elemen dengan Cangkuk

Pernyataan Masalah:
Walaupun menggunakan rujukan untuk satu elemen dengan cangkuk adalah mudah, ini menjadi lebih kompleks apabila berurusan dengan tatasusunan elemen.

Pelaksanaan:
Untuk melaksanakan berbilang rujukan bagi tatasusunan elemen menggunakan cangkuk, kita boleh memanfaatkan cangkuk useRef sebagai berikut:

<code class="js">const App = () => {
  const itemsRef = useRef([]);//create a ref instance for array

  useEffect(() => {
    itemsRef.current = itemsRef.current.slice(0, props.items.length);
  }, [props.items]);//update the `itemsRef` array on any change of `props.items`

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

Penggunaan:
Dengan pendekatan ini, anda boleh mengakses elemen dalam tatasusunan melalui itemsRef.current[index]. Tidak seperti contoh dalam soalan, ini memastikan bahawa rujukan dikemas kini dengan betul apabila tatasusunan berubah.

Nota Tambahan:

• Memandangkan cangkuk tidak boleh digunakan dalam gelung, cangkuk useEffect digunakan untuk mengemas kini tatasusunan itemsRef pada pemaparan semula yang disebabkan oleh perubahan dalam props.items.
• Kaedah slice() memastikan bahawa tatasusunan itemsRef hanya mengandungi elemen yang sepadan dengan prop semasa. susunan item.

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