Bagaimana Menggunakan Rujukan Berbilang dengan Cangkuk untuk Susunan Unsur?

Menggunakan Rujukan Berbilang untuk Susunan Elemen dengan Cangkuk

Cangkuk useRef menyediakan rujukan berterusan kepada elemen dalam komponen React anda. Ia membolehkan anda mengakses dan mengubah suai elemen DOM secara terus. Dalam kes satu elemen, menggunakan useRef adalah mudah. Walau bagaimanapun, bagaimana jika anda ingin menggunakan berbilang rujukan untuk tatasusunan elemen?

Masalahnya

Pertimbangkan kod berikut:

<code class="js">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>
  );
};

ReactDOM.render(
  <App />,
  document.getElementById("root")
);</code>

Kod ini akan menyebabkan ralat kerana elRef.current bukan tatasusunan. Ia adalah rujukan kepada elemen pertama dalam tatasusunan.

Penyelesaian dengan Ref Luar

Penyelesaian yang mungkin untuk masalah ini ialah menggunakan rujukan luaran untuk mengekalkan jejak pelbagai elemen. Berikut ialah contoh:

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

const App = (props) => {
  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 kes ini, itemsRef.current ialah tatasusunan yang memegang rujukan kepada semua elemen dalam tatasusunan. Anda boleh mengakses elemen ini menggunakan itemsRef.current[n].

Nota: Adalah penting untuk diingat bahawa cangkuk tidak boleh digunakan di dalam gelung. Oleh itu, cangkuk useEffect digunakan di luar gelung untuk mengemas kini tatasusunan itemsRef.

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