React에서 참조에 대한 올바른 예방 유형은 무엇입니까?

React에서 참조에 대한 올바른 예방 유형은 무엇입니까?

레독스 스토어에 ref를 저장하고 mapStateToProps를 사용하여 ref에 액세스해야 하는 컴포넌트의 ref를 표시하고 있습니다.

저장된 참조는 다음과 같습니다.

ref={node => this.myRefToBePutInReduxGlobalStore = node}

이 참조에 적합한 propType은 무엇입니까?

TL;DR

는, 「DOM」 를 합니다.div ★★★input올바른 정의는 다음과 같습니다.

refProp: PropTypes.oneOfType([
    // Either a function
    PropTypes.func, 
    // Or the instance of a DOM native element (see the note about SSR)
    PropTypes.shape({ current: PropTypes.instanceOf(Element) })
])

원래 투고에서 설명한 특정 문제에 대한 답변

가 있는 가 지적한 으로, op를 사용하여 입니다.mapStateToProps 타입은 DOM would 、 DOM 、 음음음음음 。myRefToBePutInReduxGlobalStore: PropTypes.instanceOf(Element)(DOM 소 、 [ DOM ] ） 。지만 、 는: :

1. 을 「」로 변경합니다.myElementToBePutInReduxGlobalStore
2. 직렬화할 수 없는 데이터를 Redox 저장소에 저장하지 않음
3. 리액트 엔지니어 세브 마크비지의 설명에 따라 소품에서 요소를 통과시키지 마십시오.

---

실제 질문에 대한 긴 답변

Q: React의 ref에 대한 올바른 proptype은 무엇입니까?

사용 예:

function FancyInput({ inputRef }) {
    return (
        <div className="fancy">
            Fancy input
            <input ref={inputRef} />
        </div>
    )
}

FancyInput.propTypes = {
    inputRef: ???   // What is the correct prop type here?
}

function App(props) {
    const inputRef = React.useRef()
    useLayoutEffect(function focusWhenStuffChange() {
        inputRef.current?.focus()
    }, [props.stuff])
    return <FancyInput inputRef={inputRef} />
}

---

현재 반응에는 두 가지 종류의 참조가 존재합니다.

1. :{ current: [something] } 에 의해 작성됩니다.React.createRef() 또는 "helper"React.useRef()을 끼우다
2. " " " 를 하는 [something]예시와 ) 로서 (OP 예시와 같은)

주의: 이전에는 문자열 ref도 사용할 수 있었지만, 레거시라고 간주되어 리액션에서 삭제됩니다.

과 같은 받침 합니다.PropTypes.func.

참조가 가리키는 요소의 유형을 지정할 수 있으므로 첫 번째 옵션은 명확하지 않습니다.

좋은 답변이 많다

ref 요소 수 있습니다.

완전한 유연성을 원하는 경우:

refProp: PropTypes.oneOfType([
    PropTypes.func, 
    PropTypes.shape({ current: PropTypes.any })
])

current소유물.어떤 종류의 레퍼런스에 대해서도 항상 효과가 있습니다.개발 시 불일치를 발견하는 방법인 소품 타입을 사용하는 경우에는 이 정도면 충분합니다.모양이 있는 물체가 그 물체에{ current: [any] }에됩니다.refToForward소품, 실제 참조가 아닐 수도 있습니다.

단, 컴포넌트가 어떤 종류의 참조를 필요로 하는 것이 아니라 특정 유형의 참조만을 필요로 한다고 선언할 수 있습니다.

저는 몇 가지 다른 레퍼런스 선언 방법을 보여주는 샌드박스를 세팅하고 있습니다.또한 몇 가지 비재래적인 방법으로 테스트하고 있습니다.여기서 찾을 수 있어요.

---

HTML이 아닌 네이티브 입력 요소를 가리키는 참조만 기대하는 경우Element:

refProp: PropTypes.oneOfType([
    PropTypes.func, 
    PropTypes.shape({ current: PropTypes.instanceOf(HTMLInputElement) })
])

React 클래스 구성 요소를 가리키는 참조만 예상하는 경우:

refProp: PropTypes.oneOfType([
    PropTypes.func, 
    PropTypes.shape({ current: PropTypes.instanceOf(Component) })
])

기능 컴포넌트를 가리키는 참조만 기대하는 경우useImperativeHandle일부 공개 방법을 노출하려면:

refProp: PropTypes.oneOfType([
    PropTypes.func, 
    PropTypes.shape({ current: PropTypes.object })
])

주의: 위의 소품 유형은 반응 컴포넌트와 네이티브 DOM 요소도 모두 기본 javascript를 상속하기 때문에 흥미롭습니다.Object

---

참조용 소품 유형을 선언할 수 있는 좋은 방법은 없습니다. 용도에 따라 다릅니다.참조인이 매우 식별된 것을 지적한 경우 특정 소품 유형을 추가할 가치가 있습니다.그렇지 않으면 일반적인 모양만 확인해도 충분할 것 같습니다.

---

서버 측 렌더링에 대한 참고

코드가 서버에서 실행되어야 하는 경우 DOM 환경을 폴리필하지 않는 한Element또는 다른 클라이언트측 타입은undefinedNodeJS에 있습니다.다음 심을 사용하여 지원할 수 있습니다.

Element = typeof Element === 'undefined' ? function(){} : Element

---

다음 React Docs 페이지에서는 오브젝트와 콜백 모두에서 ref를 사용하는 방법 및 후크를 사용하는 방법에 대해 자세히 설명합니다.

@Rahul Sagore, @Ferenk Kamra, @svnm 및 @Kamuela Franco에 대한 답변 업데이트

@Pandaiolo의 투고와 매우 유사합니다.

PropTypes.elementType이제 추가되었습니다.

forwardedRef: PropTypes.oneOfType([
  PropTypes.func,
  PropTypes.shape({ current: PropTypes.instanceOf(Element) })
]),

PropTypes.instanceOf(Element)Ferenc에 의해 언급된 바와 같이 현재 이 작업을 수행하는 올바른 방법인 것 같습니다.

선호하는 방법만 확인하고 PropType.object는 가치가 없기 때문에 다음과 같은 방법을 사용하게 되었습니다.

PropTypes.shape({ current: PropTypes.instanceOf(Element) })

위의 답변들을 모두 확인했지만, 반응으로 경고가 나와 조사를 많이 해서 정답을 맞혔습니다.

import React, { Component } from 'react';

ComponentName.propTypes = {
  reference: PropTypes.oneOfType([
    PropTypes.func,
    PropTypes.shape({ current: PropTypes.instanceOf(Component) }),
  ]),
};

언급URL : https://stackoverflow.com/questions/48007326/what-is-the-correct-proptype-for-a-ref-in-react