useRef와 forwardRef를 함께 사용하는 올바른 방법은 무엇입니까?
두 가지 구성 요소가 있습니다.App그리고.Child사용합니다useRefDOM 요소를 가져오기 위한 후크Child구성 요소 및 작업을 수행합니다.
저도 합격입니다.ref부터App의 구성 요소.Child구성 요소사용React.forwardRefAPI.
App.tsx:
import { useRef } from "react";
import Child from "./Child";
export default function App() {
const ref = useRef(null);
console.log("App ref: ", ref);
return (
<div className="App">
<Child ref={ref} />
</div>
);
}
Child.ts:
import React, { useEffect, useRef } from "react";
export default React.forwardRef((props, ref) => {
const innerRef = useRef<HTMLDivElement>(null);
const divElement = ref || innerRef; // TSC throw error here.
useEffect(() => {
if (divElement.current) {
console.log("clientWidth: ", divElement.current.clientWidth);
// do something with divElement.current
}
}, []);
return <div ref={divElement}></div>;
});
올바른 사용 방법인지 잘 모르겠습니다.innerRef및 전달됨ref위와 같이 함께적어도 TSC는 이렇게 사용할 수 없다는 것을 의미하는 오류를 던집니다.
'(알 수 없음) => void) | MutableRefObject'를 'string | (void: HTMLDivElement | null) => void' 유형에 할당할 수 없습니다.'MutableRefObject' 유형을 'string | (void) (void: HTMLDivElement | null) => void) | RefObject | null | defined' 유형에 할당할 수 없습니다.'MutableRefObject' 유형은 'RefObject' 유형에 할당할 수 없습니다.'current' 속성 유형이 호환되지 않습니다.'unknown' 유형은 '유형에 할당할 수 없습니다.HTMLDivElement | null'입니다.'unknown' 유형은 '유형에 할당할 수 없습니다.HTMLdivElement'.ts(2322) index.d.ts(143, 9):예상되는 유형은 여기서 '상세 정보' 유형으로 선언되는 속성 'ref'에서 왔습니다.HTML 프로그램<HTML 속성, HTMLDivElement >'
정확한 리핀을 받고 싶습니다.App구성 요소 및 사용ref하위 구성 요소에도 있습니다.어떻게 해야 하나요?
forwardRef 인수에 대한 유형을 제공하지 않았기 때문에 ref/innerRef가 동일하게 입력되었는지 알 수 없으므로 TS 오류를 대부분 무시할 수 있습니다.
const divElement = ref || innerRef; <div ref={divElement}></div>
나는 이 부분을 이해하지 못합니다. 당신은 그것이 ref가 주어졌는지 여부와 관계없이 div 요소에 대한 직접적인 참조를 갖기를 원합니까?
어쨌든, 만약 당신이 이렇게 작동하고 싶다면, 당신은 그것을 사용하는 것이 가장 좋다고 생각합니다.useImperativeHandle와 같은useImperativeHandle(ref, () => innerRef.current);
따라서 Child 구성 요소 자체가 Ref를 사용하여innerRef하지만 만약 누군가가 Child 구성요소에 ref를 전달한다면, 그것은 그것을 산출할 것입니다.
export default React.forwardRef((props, ref) => {
const innerRef = useRef<HTMLDivElement>(null);
useImperativeHandle(ref, () => innerRef.current);
useEffect(() => {
if (innerRef.current) {
console.log("clientWidth: ", innerRef.current.clientWidth);
}
}, []);
return <div ref={innerRef}></div>;
});
언급URL : https://stackoverflow.com/questions/68162617/whats-the-correct-way-to-use-useref-and-forwardref-together
'programing' 카테고리의 다른 글
| 여러 window.onload 이벤트 추가 (0) | 2023.06.29 |
|---|---|
| 자동 재생 기능이 없으면 WordPress 비디오도 재생되지 않는 이유는 무엇입니까? (0) | 2023.06.29 |
| Git 구성을 저장소의 일부로 저장하는 방법은 무엇입니까? (0) | 2023.06.29 |
| 더 이상 존재하지 않는 원격 분기를 표시하는 'git branch -av' (0) | 2023.06.29 |
| EF 4.1 예외 "공급자가 공급자 매니페스트를 반환하지 않았습니다.토큰 문자열" (0) | 2023.06.29 |