React Hooks를 사용하여 요소 배열에 대해 여러 참조를 사용하는 방법은 무엇입니까?

후크가 있는 요소 배열에 대해 여러 참조 사용

문제 설명:
후크가 있는 단일 요소에 대해 참조를 사용하는 것은 간단하지만 요소 배열을 처리할 때 이는 더욱 복잡해집니다.

구현:
후크를 사용하여 요소 배열에 대한 여러 참조를 구현하려면 다음과 같이 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[index]를 통해 배열의 요소에 액세스할 수 있습니다. 질문의 예와 달리 이는 배열이 변경될 때 참조가 올바르게 업데이트되도록 보장합니다.

추가 참고 사항:

• 후크를 내부에서 사용할 수 없으므로 루프에서 useEffect 후크는 props.items의 변경으로 인해 다시 렌더링될 때 itemsRef 배열을 업데이트하는 데 사용됩니다.
• slice() 메서드는 itemsRef 배열에 현재 props에 해당하는 요소만 포함되도록 합니다. 항목 배열.

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