道具验证中缺少反应/道具类型
Posted
技术标签:
【中文标题】道具验证中缺少反应/道具类型【英文标题】:is missing in props validation react/prop-types 【发布时间】:2017-09-26 22:18:18 【问题描述】: 我是 js 新手。 修复了其他无法仅修复 props lint 错误的 lint 错误我收到以下 lint 错误,用 Google 搜索该错误无法弄清楚问题所在。 17:20 错误“playerLaughing”在道具验证反应/道具类型中丢失
提供以下代码
你们能告诉我如何解决它吗C:\workspace\sports-dia-dashboard\src\components\sample-player\player-section.jsx
17:20 error 'playerLaughing' is missing in props validation react/prop-types
17:40 error 'id' is missing in props validation react/prop-types
23:9 warning Unexpected var, use let or const instead no-var
23:53 error 'jumping' is missing in props validation react/prop-types
28:32 warning There should be no space before '=' react/jsx-equals-spacing
28:32 warning There should be no space after '=' react/jsx-equals-spacing
30:37 error 'flying' is missing in props validation react/prop-types
33:21 warning Empty components are self-closing react/self-closing-comp
44:3 error Expected indentation of 4 spaces but found 2 indent
import React from 'react';
class Swimming extends React.Component
constructor(props)
super(props);
this.playerLaughing = this.playerLaughing.bind(this);
playerLaughing()
//console.log("playerLaughing");
// debugger;
this.props.playerLaughing(this.props.id);
render()
//console.log("render");
//console.log("accordion / the ExpandCollapse Section component");
var className = 'player-section' + (this.props.jumping ? ' jumping' : '');
return (
<div className=className onClick=this.playerLaughing>
<div className = "sports-player-question-flying sports-submenu-dropmenuHeader">
<h3>
this.props.flying
</h3>
<div className="up-arrow"></div>
</div>
<div className="body">
this.props.children
</div>
</div>
);
export default Swimming;
【问题讨论】:
【参考方案1】:您需要在组件上设置静态属性“propTypes”以满足此 lint 错误。
这里有一些关于 React 的 PropTypes 的信息:React Docs
您将添加一个类似于此的部分:
import React from 'react';
import PropTypes from 'prop-types';
class Swimming extends React.Component
static propTypes =
jumping: PropTypes.bool,
playerLaughing: PropTypes.func
;
constructor(props)
...
您需要安装“prop-types”npm 包。
【讨论】:
嘿,我添加了以下行,但出现此错误 Uncaught ReferenceError: PropTypes is not defined 你能告诉我如何解决它 Uncaught ReferenceError: PropTypes is not defined render() const playerLaughing , 跳跃 = this.props; SectionExpandCollapse.propTypes = playerLaughing: PropTypes.func, jumping: PropTypes.bool ; 你需要从 npm 安装并导入 PropTypes 包。在您的控制台中输入npm install -S prop-types
,然后在您导入反应类型import PropTypes from 'prop-types'
的正下方@【参考方案2】:
您应该将propTypes
添加到您的组件中:
例如:
// this goes outside the class deceleration
Swimming.propTypes =
playerLaughing: PropTypes.func,
jumping: PropTypes.bool,
//... other props you will use in this component
;
如果你想在 class
减速中使用它,你可以像这样使用静态类字段:
// this goes inside the class deceleration
static propTypes =
playerLaughing: PropTypes.func,
jumping: PropTypes.bool,
//... other props you will use in this component
;
;
您应该安装并导入PropTypes
。见Docs
npm install --save prop-types
import PropTypes from 'prop-types'; // ES6
var PropTypes = require('prop-types'); // ES5 with npm
【讨论】:
嘿,我添加了以下行,但出现此错误 Uncaught ReferenceError: PropTypes is not defined 你能告诉我如何解决它 Uncaught ReferenceError: PropTypes is not defined render() const playerLaughing , 跳跃 = this.props; SectionExpandCollapse.propTypes = playerLaughing: PropTypes.func, jumping: PropTypes.bool ;以上是关于道具验证中缺少反应/道具类型的主要内容,如果未能解决你的问题,请参考以下文章
TypeScript 条件类型:从反应组件中提取组件道具类型
类型化的反应 - 道具作为 `type` 或 `interface`
反应导航:如何在打字稿中使用 NavigationStackScreenComponent 类型传递 redux 道具