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 上显示周数