React linter airbnb proptypes 数组

Posted

技术标签:

【中文标题】React linter airbnb proptypes 数组【英文标题】:React linter airbnb proptypes array 【发布时间】: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 的答案是正确的,您应该使类型更具体。如果您不关心该问题,而只想禁止显示警告,则只需禁用该规则即可。 【参考方案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 规则是有原因的。

以上是关于React linter airbnb proptypes 数组的主要内容,如果未能解决你的问题,请参考以下文章

Linter:“在 React + TS + 样式化组件上插入 `··` eslint(prettier/prettier)”

TypeScript 无法识别 React 正在我的 VSCode 中的 linter 中导入和使用

如何使用 ESLint + Prettier + Airbnb 规则 + TypeScript + Vetur 配置 Vue CLI 4?

airbnb/react-dates 在 DayPickerRangeController 上显示周数

使用 React 和 Webpack 设置 Airbnb ESLint

React 应用程序在部署到 Heroku 时无法加载配置“airbnb”