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

フックを使用した要素の配列に複数の Ref を使用する

問題ステートメント:
フックを使用して単一の要素に ref を使用するのは簡単に言えば、次の配列を扱う場合、これはより複雑になります。 elements.

実装:
フックを使用して要素の配列に複数の ref を実装するには、次のように useRef フックを利用できます:

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

使用法:
このアプローチでは、次のようにして配列内の要素にアクセスできます。 itemsRef.current[インデックス]。質問の例とは異なり、これにより、配列が変更されたときに参照が正しく更新されることが保証されます。

追加の注意事項:

• 内ではフックを使用できないためループでは、useEffect フックを使用して、変更による再レンダリング時に itemsRef 配列が更新されます。 props.items.
• slice() メソッドは、itemsRef 配列に現在の props.items 配列に対応する要素のみが含まれるようにします。

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