React linter airbnb proptypes 数组答案

【问题标题】：React linter airbnb proptypes arrayReact linter airbnb proptypes 数组
【发布时间】：2017-06-05 21:20:15
【问题描述】：

我有以下PropTypes：

SmartTable.propTypes = {
  name: React.PropTypes.string.isRequired,
  cols: React.PropTypes.array.isRequired,
  rows: React.PropTypes.array.isRequired,
};

但 linter 告诉我：

Prop type "array" is forbidden，怎么改？

【问题讨论】：

问题是你想改变什么：警告试图突出显示的问题，或者只是警告本身？如果前者，即您确实想遵循 eslint 规则建议的最佳实践，那么@FacundoGFlores 的答案是正确的，您应该使类型更具体。如果您不关心该问题，而只想禁止显示警告，则只需禁用该规则即可。

标签： reactjs react-proptypes linter eslint-config-airbnb

【解决方案1】：

一个可能的解决方案（但我认为这并不聪明）：

SmartTable.propTypes = {
  name: React.PropTypes.string.isRequired,
  cols: React.PropTypes.arrayOf(React.PropTypes.string),
  rows: React.PropTypes.arrayOf(React.PropTypes.string),
};

【讨论】：

为什么这不聪明？在静态类型语言中，数组是用它们包含的类型声明的，例如string[] 或 MyObject[] 所以告诉 React.PropTypes 你的数组是什么类型是有意义的。

【解决方案2】：

对我有用的解决方案之一：

如果你想要数组：

SmartTable.propTypes = {
  name: PropTypes.string.isRequired,
  cols: PropTypes.instanceOf(Array),
  rows: PropTypes.instanceOf(Array),
};

对于对象和数组，可以是：

SmartTable.propTypes = {
  name: PropTypes.string.isRequired,
  cols: PropTypes.instanceOf(Object),
  rows: PropTypes.instanceOf(Array),
};

【讨论】：

它可以工作，但它绕过了实际问题：存在 eslint 规则的原因是你没有过于笼统的 prop 类型，它们没有多大意义（github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/…）。该解决方案完成的所有工作是允许您保留过于笼统的类型，同时隐式禁用警告。但是如果你真的打算忽略它，没有什么能阻止你简单地在你的 eslint 配置中明确禁用规则。

【解决方案3】：

如果 cols 和 rows 的数组是我喜欢使用 shape 的对象，那么它可能是这样的。

    SmartTable.propTypes = {
      name: PropTypes.string.isRequired,
      cols: PropTypes.arrayOf(PropTypes.shape({
        id: PropTypes.string.isRequired,
        value: PropTypes.string,
       })
      rows: PropTypes.arrayOf(PropTypes.shape({
        id: PropTypes.string.isRequired,
        value: PropTypes.string,
       })
};

【讨论】：

【解决方案4】：

短版：

对于数组 PropTypes.shape([])

对于对象 PropTypes.shape({})

【讨论】：

【解决方案5】：

我也找到了另一种绕过数组禁止错误的方法：

PropTypes.arrayOf(PropTypes.any.isRequired).isRequired

【讨论】：

【解决方案6】：

只需添加注释 eslint-disable-line

someVal: PropTypes.array, // eslint-disable-line

【讨论】：

这是一个很好的临时解决方案，尽管它不适用于我们这些有客户禁止这样做的人。不幸的是，eslint 规则是有原因的。