フックを使用して React の要素の配列に対する複数の参照を管理するにはどうすればよいですか?

フックを使用した要素の配列の複数の参照

React では、useRef フックを使用して開発者が要素への DOM 参照を管理できます。通常、ref は単一の要素にアクセスするために使用されます。ただし、このアプローチは要素の配列には適していない可能性があります。

フックを使用して要素の配列の複数の参照を操作するには、少し異なるアプローチが必要です。次の状況を考えてみましょう:

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

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

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

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

この例では、配列内の各要素に同じ elRef を渡すだけで複数の ref を作成しようとします。ただし、このアプローチでは最後の要素のみが参照されます。

この問題を解決するには、次の手法を活用できます。

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

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

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

この改善されたソリューションでは、itemsRef を使用します。参照を保持する配列。配列を空の配列で初期化します。 useEffect では、props.items 配列の長さと一致するように itemsRef 配列を更新します。これにより、配列内の各項目に対応する参照が確実に存在します。

これで、itemsRef.current[n] を使用して個々の要素の参照にアクセスできるようになります。ここで、n は配列内の要素のインデックスです。

以上がフックを使用して React の要素の配列に対する複数の参照を管理するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。