React中ref的正确proptype是什么？

Question

我正在我的redux商店中存储一个ref，并使用mapStateToProps公开需要访问它的组件的ref。

存储的参考文件如下：

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

这个参考的正确propType是什么？

Answer 1

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

在OP问题中，不需要定义实际的ref prop类型，而是由ref指向的结果元素。

在这种情况下，道具类型应为：

myRefToBePutInReduxGlobalStore: PropTypes.instanceOf(Element)

（不过，我将其重命名为myNodeToBePutInReduxGlobalStore，并同意在redux存储区as explained in Redux FAQ中插入不可序列化的数据不是一种好习惯）

注意：跳转至答案底部以获取有关服务器端用例的评论

---

回答实际问题

另一方面，如果您实际上想强制使用实际引用的类型，例如转发到另一个组件的引用的道具，则必须在{ {1}}（用于在React组件中创建引用的preferred way，see type in react code here）和React.createRef()类型。

1. 对象形状：function适用于使用PropTypes.shape({ current: PropTypes.instanceOf(Element) })创建的参考
2. React.createRef()用于上述问题中使用的回调引用

哪个给出了以下PropType定义：

PropTypes.func

---

有关服务器端渲染的说明

如果带有prop类型的代码在服务器上运行，除非您已经polyfill DOM环境，否则forwardRef: PropTypes.oneOfType([ PropTypes.func, PropTypes.shape({ current: PropTypes.instanceOf(Element) }) ]) 在NodeJS中将是未定义的。您可以使用以下垫片来支持它：

Element

在评论中查看更多详细信息（感谢@Rahul Sagore）

编辑：添加了@Ferenk Kamras提到的对象PropType的特定形状

Answer 2

我只检查首选方式，并且由于 PropType.object 不是很有价值，所以我最终使用了这种方式：

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

Answer 3

与@Pandaiolo的帖子非常相似，

PropTypes.elementType已添加

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

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

Answer 4

我检查了以上所有答案，但从反应中得到了警告，因此我进行了大量研究，并获得了正确答案。

import React, { Component } from 'react';

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