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

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

useRef フックは、React コンポーネント内の要素への永続的な参照を提供します。これにより、DOM 要素に直接アクセスして変更することができます。単一要素の場合、useRef の使用は簡単です。しかし、要素の配列に複数の参照を使用したい場合はどうすればよいでしょうか?

問題

次のコードを考えてみましょう:

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

elRef.current は配列ではないため、このコードはエラーを引き起こします。これは配列の最初の要素への参照です。

外部参照による解決策

この問題に対する可能な解決策は、外部参照を使用して保持することです。複数の要素のトラック。以下に例を示します。

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

この場合、itemsRef.current は、配列内のすべての要素への参照を保持する配列です。 itemsRef.current[n].

注: を使用してこれらの要素にアクセスできます。ループ内ではフックを使用できないことに注意してください。したがって、useEffect フックはループの外で使用され、itemsRef 配列を更新します。

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