후크가 있는 요소 배열에 대해 여러 참조 사용
문제 설명:
후크가 있는 단일 요소에 대해 참조를 사용하는 것은 간단하지만 요소 배열을 처리할 때 이는 더욱 복잡해집니다.
구현:
후크를 사용하여 요소 배열에 대한 여러 참조를 구현하려면 다음과 같이 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([]);
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[index]를 통해 배열의 요소에 액세스할 수 있습니다. 질문의 예와 달리 이는 배열이 변경될 때 참조가 올바르게 업데이트되도록 보장합니다.
추가 참고 사항:
- 후크를 내부에서 사용할 수 없으므로 루프에서 useEffect 후크는 props.items의 변경으로 인해 다시 렌더링될 때 itemsRef 배열을 업데이트하는 데 사용됩니다.
- slice() 메서드는 itemsRef 배열에 현재 props에 해당하는 요소만 포함되도록 합니다. 항목 배열.
위 내용은 React Hooks를 사용하여 요소 배열에 대해 여러 참조를 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!