> 웹 프론트엔드 > JS 튜토리얼 > React Hooks를 사용하여 요소 배열에 대해 여러 참조를 사용하는 방법은 무엇입니까?

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

Mary-Kate Olsen
풀어 주다: 2024-11-04 01:52:30
원래의
310명이 탐색했습니다.

How to Use Multiple Refs for an Array of Elements with React Hooks?

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

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

구현:
후크를 사용하여 요소 배열에 대한 여러 참조를 구현하려면 다음과 같이 useRef 후크를 활용할 수 있습니다. 다음:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿