What is the correct type for reference in React?

Question

I save the ref in my redux store and using mapStateToProps to set the ref link for components that need access to it.

The repository that is stored is as follows:

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

What is the correct propType for this ref?

Answer 1

Answer the specific question described in the original post

In the example with the question about OP, it is necessary to declare not the support type ref, but the material referred to by the link, and which will be transferred from Redx using mapStateToProps. The type of support for the DOM element will be: myRefToBePutInReduxGlobalStore: PropTypes.instanceOf(Element)(if it is a DOM element). Although I would:

1. Rename the statics to myElementToBePutInReduxGlobalStore(this is not a link as such)
3. , React

---

: React?

:

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() {
    const inputRef = React.useRef()
    useEffect(function focusWhenStuffChange() => {
        inputRef.current && inputRef.current.focus()
    }, [stuff])
    return <FancyInput inputRef={inputRef} />
}

---

:

1. , : { current: [something] }, React.createRef() React.useRef()
2. , [something] ( OP)

: ref,

: PropTypes.func.

, , .

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) })
])

ref - , DOM.

:

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

ref 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 })
])

: prop , DOM, JavaScript Object

---

, . - , , . .

---

, DOM-, Element undefined NodeJS. :

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

---

React Docs , , , useRef

@Rahul Sagore, @Ferenk Kamras @svnm

Answer 2

, PropType.object , :

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

Answer 3

Very similar to @Pandaiolo's post,

PropTypes.elementType was added

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

When using PropTypes> = 15.7.0 PropTypes.elementTypewas added on February 10, 2019 in this PR