reactjs-React中引用的正确原型是什么?

我在我的redux存储中存储了一个引用,并使用mapStateToProps公开了需要访问它的组件的引用。

存储的ref如下所示:

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

此引用的正确propType是什么?

danday74 asked 2020-01-24T02:16:09Z
3个解决方案
43 votes

回答原始帖子中描述的特定问题

在OP问题的示例中,不是需要声明ref prop类型,而是由ref指向的东西,它将使用useRef从redux传递。DOM元素的prop类型为:undefined(如果为 DOM元素)。 虽然,我会:

  1. 将静态重命名为useRef(本身不是引用)
  2. 避免在Redux存储中存储不可序列化的数据
  3. 避免像React工程师Seb Markbage所述在道具中传递元素

回答实际问题

问: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} />
}

如今,react中存在两种引用:

  1. 看起来像这样的对象:useRef,通常由undefined助手或refToForward挂钩
  2. 一个将接收useRef作为其参数的回调函数(如OP示例中的那个)

注意:从历史上看,您也可以使用字符串ref,但它被认为是旧字符串,因此会从react中删除

第二项非常简单,需要以下道具类型:useRef

第一个选项不太明显,因为您可能要指定ref指向的元素的类型。

TL; DR

如果仅期望本机DOM元素(例如useRefundefined),则正确的定义如下:

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

长答案

useRef可以指向DOM元素以外的其他内容。

如果要完全灵活:

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

上面只是强制了对象引用具有useRef属性的形状。 对于任何类型的参考,它都将始终工作。 出于使用prop类型的目的(这是在开发时发现任何不一致之处的一种方式),这可能就足够了。 形状为undefined并传递到refToForward道具的对象似乎不太可能是实际参考。

但是,您可能希望声明您的组件不希望任何类型的引用,而只是期望某种类型,只要它需要该引用即可。

我设置了一个沙箱,展示了几种声明ref的不同方法,甚至包括一些非常规的方法,然后使用多种prop类型对其进行测试。 你可以在这里找到它。


如果仅期望引用指向本机输入元素,而不是任何HTML useRef

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

如果您只希望引用指向React类组件:

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

如果只希望使用useRef指向功能组件的引用公开某些公共方法:

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

注意:上面的prop类型很有趣,因为它还涵盖了react组件和本机DOM元素,因为它们都继承了基本的JavaScript useRef


没有一种好的方法可以为引用声明prop类型,这取决于用法。 如果您的参考指向非常明确的东西,则值得添加特定的道具类型。 否则,仅检查一般形状就足够了。


关于服务器端渲染的注意事项

如果您的代码必须在服务器上运行,除非您已经使用polyfill DOM环境,否则NodeJS中的useRef或任何其他客户端类型将是undefined。 您可以使用以下填充程序来支持它:

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

以下React Docs页面提供了有关如何使用引用,对象和回调以及如何使用useRef钩子的更多见解

感谢@Rahul Sagore,@ Ferenk Kamras和@svnm来更新答案

Pandaiolo answered 2020-01-24T02:18:36Z
7 votes

我只检查首选方法,由于PropType.object不是很有价值,因此我最终使用了这种方法:

PropTypes.shape({ current: PropTypes.instanceOf(Element) })
Ferenc Kamras answered 2020-01-24T02:18:56Z
3 votes

与@Pandaiolo的帖子非常相似,

PropTypes.elementType现在已添加

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

如果使用PropTypes> = 15.7.0 PropTypes.elementType已于2019年2月10日添加到此PR中

svnm answered 2020-01-24T02:19:24Z
translate from https://stackoverflow.com:/questions/48007326/what-is-the-correct-proptype-for-a-ref-in-react