후크를 사용하여 React의 요소 배열에 대한 여러 참조를 관리하는 방법은 무엇입니까?

후크를 사용하여 요소 배열에 대한 다중 참조

React에서 useRef 후크를 사용하면 개발자가 요소에 대한 DOM 참조를 관리할 수 있습니다. 일반적으로 ref는 단일 요소에 액세스하는 데 사용됩니다. 그러나 이 접근 방식은 요소 배열에는 적합하지 않을 수 있습니다.

후크를 사용하여 요소 배열에 대한 여러 참조로 작업하려면 약간 다른 접근 방식이 필요합니다. 다음 상황을 고려해 보겠습니다.

<code class="javascript">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>
  );
};</code>

이 예에서는 동일한 elRef를 배열의 각 요소에 전달하여 여러 참조를 생성하려고 합니다. 그러나 이 접근 방식을 사용하면 마지막 요소만 참조됩니다.

이 문제를 극복하기 위해 다음 기술을 활용할 수 있습니다.

<code class="javascript">const App = props => {
  const itemsRef = useRef([]);
  // you can access the elements with itemsRef.current[n]

  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를 사용합니다. 심판을 담을 배열. 빈 배열로 배열을 초기화합니다. useEffect에서는 props.items 배열의 길이와 일치하도록 itemsRef 배열을 업데이트합니다. 이렇게 하면 배열의 각 항목에 해당하는 참조가 있습니다.

이제 itemsRef.current[n]를 사용하여 개별 요소 참조에 액세스할 수 있습니다. 여기서 n은 배열에 있는 요소의 인덱스입니다.

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