道具验证中缺少反应/道具类型

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 道具

使用 TypeScript 反应道具类型 - 如何拥有函数类型?

使用多种道具类型反应 Typescript 组件