reactjs - React 中 ref 的正确属性类型是什么？

Question

我将 ref 存储在我的 redux 存储中，并使用 mapStateToProps 为需要访问它的组件公开 ref。

存储的 ref 如下所示:

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

这个 ref 的正确 propType 是什么？

Answer 1

TL;博士
如果你想输入一个只需要原生 DOM 元素的 ref，比如 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 问题的示例中，需要声明的不是 ref 属性类型，而是 ref 指向的内容，并且将使用 mapStateToProps 从 redux 传递. DOM 元素的 Prop 类型为: myRefToBePutInReduxGlobalStore: PropTypes.instanceOf(Element) (如果它是一个 DOM 元素)。虽然，我会:

重命名为myElementToBePutInReduxGlobalStore (元素不是引用)

Avoid storing non-serializable data inside redux store

Avoid passing elements in props正如 React 工程师 Seb Markbage

所解释的那样

对实际问题的长回答
问: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} />
}

今天，react 中存在两种 ref:

如下所示的对象:{ current: [something] } , 通常由React.createRef() helper 或React.useRef() Hook

将接收 [something] 的回调函数作为它的论点(如 OP 示例中的那个)

注意:从历史上看，您也可以使用字符串 ref，但是 it's considered legacy并将从 react 中删除
第二项非常简单，需要以下 Prop 类型: PropTypes.func .
第一个选项不太明显，因为您可能希望指定 ref 指向的元素类型。
很多好答案 ref可以指向 DOM 元素以外的东西。
如果您想完全灵活:

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

以上只是强制对象 ref w/ current 的形状属性(property)。它适用于任何类型的引用。出于使用 prop 类型的目的，这是一种在开发时发现任何不一致的方法，这可能就足够了。形状为 { current: [any] } 的对象似乎不太可能, 并传递给 refToForward Prop ，不会是实际的引用。
然而 ，您可能想要声明您的组件不期望任何类型的 ref，而只期望某种类型，因为它需要该 ref 的用途。
我已经设置了一个沙箱，展示了几种不同的方式来声明一个 ref，甚至是一些非常规的方式，然后用许多 prop 类型对其进行测试。 You can find it here .

如果您只希望 ref 指向 native 输入元素，而不是任何 HTML Element :

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

如果你只期望一个 ref 指向一个 React 类组件:

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

如果您只期望使用 useImperativeHandle 的 ref 指向功能组件公开一些公共(public)方法:

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

注意:上面的 prop 类型很有趣，因为它还涵盖了 react 组件和原生 DOM 元素，因为它们都继承了基础 javascript Object
没有单一的好方法来声明 ref 的 prop 类型，这取决于用法。如果您的 ref 指向非常明确的内容，则值得添加特定的 Prop 类型。否则，仅检查一般形状似乎就足够了。

关于服务器端渲染的注意事项
如果你的代码必须在服务器上运行，除非你已经 polyfill DOM 环境， Element或任何其他客户端类型将是 undefined在 NodeJS 中。您可以使用以下垫片来支持它:

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

以下 React 文档页面提供了更多见解 on how to use refs, both object and callbacks ，还有 how to use useRef hook
感谢@Rahul Sagore、@Ferenk Kamra、@svnm 和@Kamuela Franco 更新了答案