React フックで要素の配列に複数の Ref を使用するにはどうすればよいですか?

フックを持つ要素の配列に複数の Ref を使用するにはどうすればよいですか?

はじめに

Ref は、次の方法を提供します。 React コンポーネントの HTML 要素にアクセスします。 ref を使用して単一の要素を管理できますが、要素の配列に ref を適用する必要がある場合もあります。この記事では、React でフックを使用して要素の配列に複数の ref を実装する方法について説明します。

単一要素の Ref

単一要素の ref の使用は簡単です。

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

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

要素の配列 Ref

要素の配列に上記のアプローチを適用しても、すべての要素に同じ ref が割り当てられるため、機能しません。代わりに、ref の配列を作成し、それらを各要素に個別に割り当てる必要があります。

<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>

このソリューションでは、itemsRef.current は HTML 要素への参照の配列です。配列にインデックスを付けることで個々の要素にアクセスできます (例: itemsRef.current[0].

)

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