eslint `forbid-prop-types` 规则在 Firefox 控制台窗口中导致警告答案

【问题标题】：eslint `forbid-prop-types` rule cause a warning in firefox console windoweslint `forbid-prop-types` 规则在 Firefox 控制台窗口中导致警告
【发布时间】：2018-11-12 04:05:36
【问题描述】：

正如文档所说here

array 和 object 可以分别替换为 arrayOf 和 shape。

所以，我在我的项目中这样做了：

class X extends React.Component {
....
}

X.propTypes = {
    somePorp: PropTypes.shape.isRequired, // this cause an warnning in firefox, but satisfied eslint syntax check
    somePorp: PropTypes.object.isRequired, // no warnning in firefox, but can not satisfy eslint syntax check
}

问题：

如何避免firefox中的警告信息，以及通过eslint语法检查（最好不要修改eslint默认规则）？

顺便说一句：firefox 警告如下所示

警告：失败的道具类型：X：道具类型classes无效；它必须是一个函数，通常来自prop-types 包，但收到了undefined。

【问题讨论】：

标签： reactjs eslint

【解决方案1】：

您需要定义道具的形状。如果您不确定，只需console.log() 道具并查看它的化妆。 Click here to view the available PropType declarations.

例如，如果您要将redux 存储为this.props.store 或history 从react-router-dom 存储为this.props.history：

history: PropTypes.objectOf(PropTypes.func).isRequired,       // object of funcs
store: PropTypes.shape({                                      // shape of...
  dispatch: PropTypes.func.isRequired,                          // func
  getState: PropTypes.func.isRequired,                          // func
  liftedStore: PropTypes.objectOf(PropTypes.func).isRequired,   // object of funcs
  replaceReducer: PropTypes.func.isRequired,                    // func
  subscribe: PropTypes.func.isRequired,                         // func
  Symbol: PropTypes.func.isRequired,                            // func
}).isRequired

使用isRequired时要小心，因为有时函数/数组/对象/值/等可能存在也可能不存在。对于上面的示例，它们都应该在组件安装时出现。

【讨论】：

感谢您的快速回复；) 有两个问题： 1. 如果形状定义中有动态字段怎么办？ 2.如果有嵌套对象定义怎么办？所以，我猜最快的解决方法是在 .eslintrc 规则文件中启用对象定义 ....
如果它遵循类似的模式（如对象数组、函数数组、字符串数组等），它是否是动态的并不重要。如果它不遵循重复的模式，那么您需要创建一个自定义函数（如 usage 文档底部所示）或禁用 prop-type 验证。

【解决方案2】：

您也可以使用以下方式：

X.propTypes = {
    somePorp:  PropTypes.objectOf(PropTypes.object()),  
}

【讨论】：