道具验证中缺少 React eslint 错误

Posted 2023-03-08

【中文标题】道具验证中缺少 React eslint 错误

【英文标题】：React eslint error missing in props validation

【发布时间】：2016-12-05 17:05:25

【问题描述】：

我有下一个代码，eslint throw：

react/prop-types onClickOut;道具验证中缺少

react/prop-types 孩子；道具验证中缺少

propTypes 已定义，但 eslint 无法识别。

import React,  Component, PropTypes  from 'react';

class IxClickOut extends Component 
  static propTypes = 
    children: PropTypes.any,
    onClickOut: PropTypes.func,
  ;

 componentDidMount() 
    document.getElementById('app')
      .addEventListener('click', this.handleClick);
  

  componentWillUnmount() 
    document.getElementById('app')
      .removeEventListener('click', this.handleClick);
  

  handleClick = ( target :  target: EventTarget ) => 
    if (!this.containerRef.contains(target)) 
      this.props.onClickOut();
    
  ;

  containerRef: htmlElement;

  render() 
    const  children, ...rest  = this.props;
    const filteredProps = _.omit(rest, 'onClickOut');

    return (
      <div
        ...filteredProps
        ref=container => 
          this.containerRef = container;
        
      >
        children
      </div>
    );
  


export default IxClickOut;

package.json

  "name": "verinmueblesmeteor",
  "private": true,
  "scripts": 
    "start": "meteor run",
    "ios": "NODE_ENV=developement meteor run ios"
  ,
  "dependencies": 
    "fine-uploader": "^5.10.1",
    "foundation-sites": "^6.2.3",
    "install": "^0.8.1",
    "ix-gm-polygon": "^1.0.11",
    "ix-type-building": "^1.4.4",
    "ix-type-offer": "^1.0.10",
    "ix-utils": "^1.3.7",
    "keymirror": "^0.1.1",
    "meteor-node-stubs": "^0.2.3",
    "moment": "^2.13.0",
    "npm": "^3.10.3",
    "rc-slider": "^3.7.3",
    "react": "^15.1.0",
    "react-addons-pure-render-mixin": "^15.1.0",
    "react-dom": "^15.1.0",
    "react-fileupload": "^2.2.0",
    "react-list": "^0.7.18",
    "react-modal": "^1.4.0",
    "react-redux": "^4.4.5",
    "react-router": "^2.6.0",
    "react-styleable": "^2.2.4",
    "react-textarea-autosize": "^4.0.4",
    "redux": "^3.5.2",
    "redux-form": "^5.3.1",
    "redux-thunk": "^2.1.0",
    "rxjs": "^5.0.0-beta.9",
    "rxjs-es": "^5.0.0-beta.9",
    "socket.io": "^1.4.8"
  ,
  "devDependencies": 
    "autoprefixer": "^6.3.6",
    "babel-eslint": "^6.0.4",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-0": "^6.5.0",
    "core-js": "^2.0.0",
    "cssnano": "^3.7.1",
    "eslint": "^2.12.0",
    "eslint-config-airbnb": "^9.0.1",
    "eslint-import-resolver-meteor": "^0.2.3",
    "eslint-plugin-import": "^1.8.1",
    "eslint-plugin-jsx-a11y": "^1.2.2",
    "eslint-plugin-react": "^5.1.1",
    "node-sass": "^3.8.0",
    "postcss-cssnext": "^2.6.0",
    "sasslets-animate": "0.0.4"
  ,
  "cssModules": 
    "ignorePaths": [
      "node_modules"
    ],
    "jsClassNamingConvention": 
      "camelCase": true
    ,
    "extensions": [
      "scss",
      "sass"
    ],
    "postcssPlugins": 
      "postcss-modules-values": ,
      "postcss-modules-local-by-default": ,
      "postcss-modules-extract-imports": ,
      "postcss-modules-scope": ,
      "autoprefixer": 
    
  

.babelrc

  "presets": [
    "es2015",
    "react",
    "stage-0"
  ],
  "whitelist": [
      "es7.decorators",
      "es7.classProperties",
      "es7.exportExtensions",
      "es7.comprehensions",
      "es6.modules"
  ],
  "plugins": ["transform-decorators-legacy"]

.eslintrc

  "parser": "babel-eslint",
  "extends": "airbnb",
  "rules": 
    "no-underscore-dangle": ["error",  "allow": [_id, b_codes_id] ],
  ,
  "settings": 
    "import/resolver": "meteor"
  ,
  "globals": 
    "_": true,
    "CSSModule": true,
    "Streamy": true,
    "ReactClass": true,
    "SyntheticKeyboardEvent": true,
  

【问题讨论】：

也许最好写：const children, onClickOut, ...filteredProps = this.props;

你在使用 babel-eslint 吗？

@horyd 不是，如果我这样做了，eslint throw no-unused-vars onClickOut 已定义但从未使用过

尝试将其定义为：static get propTypes() return children: PropTypes.any, onClickOut: PropTypes.func ;

是的@TimoSta 我使用 babel-eslint

【参考方案1】：

如果您希望在类声明中使用propTypes，则需要将其定义为静态getter：

static get propTypes()  
    return  
        children: PropTypes.any, 
        onClickOut: PropTypes.func 
    ; 

如果要将其定义为对象，则需要在类外定义，如下所示：

IxClickOut.propTypes = 
    children: PropTypes.any,
    onClickOut: PropTypes.func,
;

另外最好从prop-types，不 react导入prop类型，否则你会在控制台看到警告（为React 16做准备）：

import PropTypes from 'prop-types';

【讨论】：

取决于 Babel 配置，如果你使用静态属性插件，它不需要更好。

谢谢。第一个选项引发相同的错误，第二个选项解决了问题，但我不明白为什么在这种情况下定义为类属性会引发错误。注意：我有另一个可以正常工作的组件定义为类属性

不知道为什么一个失败而另一个工作。我认为无论哪种方式都需要在类上静态定义它，也许我错了。

【参考方案2】：

我知道这个答案很荒谬，但请考虑在错误解决或升级工具之前禁用此规则：

/* eslint-disable react/prop-types */ // TODO: upgrade to latest eslint tooling

或者在你的 eslintrc 中禁用项目范围：

"rules": 
  "react/prop-types": "off"

【讨论】：

禁用此规则的实际语法是："react/prop-types": "off"

谢谢，这也是我在 eslintrc 的规则部分下使用的

IMO，这是一种不好的做法，不应该推荐给开发人员。禁用规则可能会让你陷入编写糟糕代码的兔子洞。 （即在看起来更方便时禁用规则。）

【参考方案3】：

看来问题出在eslint-plugin-react。

如果您通过解构类中的任何位置对命名对象进行了注释，则它无法正确检测 propTypes 中提到的道具。

过去有similar problem

【讨论】：

我正在使用 babel-eslint 并启用所有阶段注意：我还有另一个可以正常工作的组件定义为类属性

@cristiancamilocedeñogallego 发布相关配置：package.json, .eslintrc 很难说为什么它不支持 propTypes

所以问题出在handleClick中的流注解中

是的 @alik 删除了流注释并且工作正常

【参考方案4】：

我在过去几天遇到了这个问题。就像 Omri Aharon 在上面的回答中所说的那样，为您的道具类型添加类似于以下内容的定义很重要：

SomeClass.propTypes = 
    someProp: PropTypes.number,
    onTap: PropTypes.func,
;

不要忘记在您的课程之外添加道具定义。我会把它放在我班级的正下方/上方。如果您不确定 PropType 的变量类型或后缀是什么（例如：PropTypes.number），请参阅npm reference。要使用 PropTypes，您必须导入包：

import PropTypes from 'prop-types';

如果您收到 linting 错误：someProp is not required, but has no corresponding defaultProps declaration，您只需将 .isRequired 添加到 prop 定义的末尾，如下所示：

SomeClass.propTypes = 
    someProp: PropTypes.number.isRequired,
    onTap: PropTypes.func.isRequired,
;

或者像这样添加默认属性值：

SomeClass.defaultProps = 
    someProp: 1
;

如果你和我一样，没有经验或不熟悉 reactjs，你也可能会收到这个错误：Must use destructuring props assignment。要修复此错误，请在使用道具之前定义它们。例如：

const  someProp  = this.props;

【参考方案5】：

对我来说，将 eslint-plugin-react 升级到最新版本 7.21.5 解决了这个问题

【参考方案6】：

问题：道具验证中缺少“id1”，eslintreact/prop-types

<div id=props.id1 >
    ...
</div>

以下解决方案有效，在功能组件中：

let  id1  = props;

<div id=id1 >
    ...
</div>

希望对您有所帮助。

【参考方案7】：

问题出在 handleClick 中的流注释中，我删除了它并且工作正常 谢谢@alik

【参考方案8】：

PropTypes 检查是个好东西，不建议通过设置忽略

您可以使用 vscode React PropTypes Generate 扩展自动生成 propTypes：

选择您的组件名称 按命令 + 。 （Windows 为 Ctrl + .）显示代码操作并选择 PropTypesGenerate，或在 macOS 中按 shift + command + alt + P（Windows 为 shift + ctrl + alt + P） 输入 propType 替换默认类型

【参考方案9】：

我发现 eslint 在我自己正在处理的项目中过于严格，但对于这个错误，我通过定义我的接口然后实现它来修复它：

interface myInterface: 
  test: string


const MyComponent: React.FC<myInterface> = (props: myInterface) => 

【参考方案10】：

使用-npm i prop-types --save 安装 prop-types 包 导入它-

import PropTypes from 'prop-types';

然后指定props，我是这样实现的-

export default function Text( children ) 
    Text.propTypes = 
        children: PropTypes.node.isRequired,
        ;
  return (
    <VStyle className="para">
      <p>children</p>
    </VStyle> 
  );

在你的 eslintrc.json 或 .js 文件中也添加这个

"rules": 
    "react/prop-types": "off"
  

【参考方案11】：

从类似问题中复制我的答案： https://***.com/a/69199304/4290193

eslint-plugin-react@^7.25.0 似乎有 resolved 的问题，对于那些使用 React.FC<IProps> 和 react/prop-types 验证规则的人。

所以不是

const Example: React.FC<IProps> = (props: IProps) => ...

现在可以在更新后没有警告的情况下工作

const Example: React.FC<IProps> = (props) => ...

【参考方案12】：

功能性反应组件。定义为对象。我收到此错误是因为我从另一个名称稍有不同的对象复制并粘贴了该对象，但忘记更改 proptypes 对象的名称。

FooterIcons.propTypes =  -> FooterIcon.propTypes

【参考方案13】：

我们可以引入 children 属性作为组件 props 的一部分，而不是禁用 prop-types 规则，例如：

import React,  Component  from 'react';

export default class ErrorBoundary extends Component< children: React.ReactNode > 
  constructor(props:  children: React.ReactNode ) 
    super(props);

    this.state =  error: null, errorInfo: null ;
  

  componentDidCatch(error: Readonly<unknown>, errorInfo: Readonly<unknown>): void 
    this.setState( error, errorInfo );
  

  render(): React.ReactElement | React.ReactNode 
    const  children  = this.props;
    const  error, errorInfo  = this.state as Readonly<Record<string,  componentStack: string >>;

    if (errorInfo)
      return (
        <details>
          <h3>Oops, error detected.</h3>
          <p>error?.toString()</p>
          <p>errorInfo?.componentStack</p>
        </details>
      );
    return children;
  

以上是eslint错误消失的典型例子~~

别着急开心就好~~

【参考方案14】：

在新版本的 React 和 Next.js 上，你可以简单地导入 PropTypes，如下所示，

import PropTypes from "prop-types";

并在文件底部添加 defaultProps 和 propTypes，例如，

Post.defaultProps = 
  posts: "",
;

Post.propTypes = 
  posts: PropTypes.string,
;

export default Post;

它应该可以解决您的 eslint 警告。