요소 배열에 후크가 있는 다중 참조를 사용하는 방법은 무엇입니까?

후크가 있는 요소 배열에 다중 참조 사용

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 배열을 업데이트하는 데 사용됩니다.

위 내용은 요소 배열에 후크가 있는 다중 참조를 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!