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

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

質問:

どうすればよいですかReact フック API を使用して要素の配列に複数の ref を実装できますか?

背景:

単一の要素に ref を使用するのは簡単ですが、それを配列に拡張します

提案された解決策:

フックはループ内で使用できないため、カスタム アプローチが必要です:

ステップ 1: 参照の配列を作成する

まず、参照のリストを保持する ref オブジェクトを作成します。

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

ステップ 2: 要素の参照にアクセスする

配列内の各要素には、インデックスを使用してアクセスできます。

<code class="javascript">itemsRef.current[n] // nth element's ref</code>

ステップ 3: 配列変更時に Ref 配列を更新する

ref 配列が要素の配列と同期していることを確認してください。これは useEffect フックで実行できます:

<code class="javascript">useEffect(() => {
  itemsRef.current = itemsRef.current.slice(0, props.items.length);
}, [props.items]);</code>

ステップ 4: 配列要素に参照を割り当てる

要素を作成するときに、それぞれに適切な参照を割り当てます。 :

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

これらの手順に従うと、フックを使用して要素の配列に対して複数の ref を正常に使用できます。

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