React Hooks를 사용하여 요소 배열에 대한 다중 참조를 구현하는 방법은 무엇입니까?

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

질문:

어떻게 할 수 있나요? React Hooks API를 사용하여 요소 배열에 대해 여러 참조를 구현하시겠습니까?

배경:

단일 요소에 대해 참조를 사용하는 것은 간단하지만 이를 배열로 확장합니다. 요소 수에는 다른 접근 방식이 필요합니다.

제안된 솔루션:

후크는 루프 내에서 사용할 수 없으므로 사용자 지정 접근 방식이 필요합니다.

1단계: 참조 배열 생성

참조 목록을 담을 참조 개체를 생성하여 시작합니다.

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

2단계: 요소 참조에 액세스

색인을 사용하여 배열의 각 요소에 액세스할 수 있습니다.

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

3단계: 배열 변경 시 참조 배열 업데이트

참조 배열이 요소 배열과 동기화된 상태를 유지하는지 확인하세요. 이는 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>

이 단계를 따르면 후크가 있는 요소 배열에 대해 여러 참조를 성공적으로 사용할 수 있습니다.

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