TL; DR
a div또는 an 과 같은 기본 DOM 요소 만 예상하는 ref 유형을 prop하려는 경우 input올바른 정의는 다음과 같습니다.
refProp: PropTypes.oneOfType([
PropTypes.func,
PropTypes.shape({ current: PropTypes.instanceOf(Element) })
])
원본 게시물에 설명 된 특정 문제에 대한 답변
OP 질문의 예에서 선언해야하는 것은 ref prop 유형이 아니라 ref가 가리키는 항목이며 mapStateToProps. DOM 요소의 소품 유형은 다음과 같습니다 myRefToBePutInReduxGlobalStore: PropTypes.instanceOf(Element)(DOM 요소 인 경우). 하지만 다음과 같습니다.
- 이름 바꾸기
myElementToBePutInReduxGlobalStore(요소는 참조가 아님)
- 직렬화 불가능한 데이터를 redux 저장소에 저장하지 마십시오.
- React 엔지니어 Seb Markbage의 설명대로 소품에 요소를 전달하지 마십시오.
실제 질문에 대한 긴 답변
Q : React에서 ref에 대한 올바른 proptype은 무엇입니까?
사용 사례 예 :
function FancyInput({ inputRef }) {
return (
<div className="fancy">
Fancy input
<input ref={inputRef} />
</div>
)
}
FancyInput.propTypes = {
inputRef: ???
}
function App(props) {
const inputRef = React.useRef()
useLayoutEffect(function focusWhenStuffChange() {
inputRef.current?.focus()
}, [props.stuff])
return <FancyInput inputRef={inputRef} />
}
오늘날 반응에는 두 가지 종류의 ref가 존재합니다.
- 다음과 같은 객체 :
{ current: [something] }일반적으로 React.createRef()도우미 또는 React.useRef()후크에 의해 생성됨
[something]인수로 받을 콜백 함수 (OP 예제에서와 같이)
참고 : 역사적으로 문자열 ref를 사용할 수도 있지만 레거시로 간주 되며 반응에서 제거됩니다.
두 번째 항목은 매우 간단하며 다음 소품 유형이 필요합니다 PropTypes.func..
첫 번째 옵션은 ref가 가리키는 요소 유형을 지정하려고 할 수 있기 때문에 덜 명확합니다.
많은 좋은 답변
ref DOM 요소가 아닌 다른 것을 가리킬 수 있습니다.
완전히 유연 해지고 싶다면 :
refProp: PropTypes.oneOfType([
PropTypes.func,
PropTypes.shape({ current: PropTypes.any })
])
위의 내용은 current속성 이있는 객체 참조의 모양을 강제합니다 . 모든 종류의 심판에 대해 항상 작동합니다. 을 개발할 때 불일치를 발견하는 방법 인 prop 유형을 사용 하려면 이 정도면 충분할 것입니다. 모양을 가진 객체가 소품에 전달 되면 실제 참조 가 아닐 가능성 은 매우 낮습니다 .{ current: [any] }refToForward
그러나 컴포넌트가 어떤 종류의 ref도 기대하지 않고 특정 유형 만 필요하다고 선언 할 수 있습니다 .
나는 ref를 선언하는 몇 가지 다른 방법을 보여주는 샌드 박스를 설정했습니다. 여기에서 찾을 수 있습니다 .
당신은 단지 기본 입력 요소에 심판을 가리키는 경우를 예측하지 어떤 HTML Element:
refProp: PropTypes.oneOfType([
PropTypes.func,
PropTypes.shape({ current: PropTypes.instanceOf(HTMLInputElement) })
])
React 클래스 구성 요소를 가리키는 ref 만 예상하는 경우 :
refProp: PropTypes.oneOfType([
PropTypes.func,
PropTypes.shape({ current: PropTypes.instanceOf(Component) })
])
useImperativeHandle일부 공용 메서드를 노출 하는 데 사용하는 기능 구성 요소를 가리키는 참조 만 예상하는 경우 :
refProp: PropTypes.oneOfType([
PropTypes.func,
PropTypes.shape({ current: PropTypes.object })
])
참고 : 위의 prop 유형은 모두 기본 자바 스크립트를 상속하므로 반응 구성 요소와 기본 DOM 요소도 포함하므로 흥미 롭습니다. Object
ref에 대한 prop 유형을 선언하는 좋은 방법은 없습니다. 사용법에 따라 다릅니다. 참조가 매우 식별 된 것을 가리키는 경우 특정 소품 유형을 추가 할 가치가 있습니다. 그렇지 않으면 일반적인 모양을 확인하는 것만으로 충분 해 보입니다.
서버 측 렌더링에 대한 참고 사항
코드가 서버에서 실행되어야하는 경우, 이미 DOM 환경을 폴리 필하지 않는 한 Element또는 다른 클라이언트 측 유형이 undefinedNodeJS에 있습니다. 다음 shim을 사용하여 지원할 수 있습니다.
Element = typeof Element === 'undefined' ? function(){} : Element
다음 React Docs 페이지는 refs, object 및 callbacks 사용 방법 및 후크 사용 방법에 대한 자세한 정보 를 제공합니다.useRef
@Rahul Sagore, @Ferenk Kamra, @svnm 및 @Kamuela Franco에 감사드립니다.
refprop에 전달 된 값 은 첫 번째 인수가 DOM 요소에 대한 참조이거나 null 인 함수입니다. 그것은 기능 입니다.