道具驗證中缺少 React eslint 錯誤

Question

我有下一個代碼，eslint throw：

反應/道具類型 onClickOut； 道具驗證中缺少

反應/道具類型的孩子； 道具驗證中缺少

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,
  }
}

Answer 1

如果您希望在類聲明中使用它，則需要將propTypes定義為靜態 getter：

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

如果要將其定義為對象，則需要在類外定義它，如下所示：

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

此外，最好從prop-types導入 prop 類型，而不是react ，否則您會在控制台中看到警告（作為React 16 的准備）：

import PropTypes from 'prop-types';

Answer 2

我知道這個答案很荒謬，但請考慮禁用此規則，直到錯誤得到解決或您升級了工具：

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

或者在你的 eslintrc 中禁用項目范圍：

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

Answer 3

似乎問題出在eslint-plugin-react 。

如果您通過在類中的任何地方解構來注釋命名對象，則它無法正確檢測propTypes中提到的道具。

過去有類似的問題

Answer 4

我在過去幾天遇到了這個問題。 就像 Omri Aharon 在上面的回答中所說的那樣，為您的道具類型添加類似於以下內容的定義很重要：

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

不要忘記在類之外添加 prop 定義。 我會把它放在我班級的正下方/上方。 如果您不確定您的 PropType 的變量類型或后綴是什么（例如：PropTypes.number），請參閱此npm 參考。 要使用 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,
};

或者像這樣添加默認的 prop 值：

SomeClass.defaultProps = {
    someProp: 1
};

如果你和我一樣，沒有經驗或不熟悉 reactjs，你也可能會得到這個錯誤： Must use destructuring props assignment 。 要修復此錯誤，請在使用 props 之前定義它們。 例如：

const { someProp } = this.props;

Answer 5

對我來說，將eslint-plugin-react升級到最新版本 7.21.5 解決了這個問題

Answer 6

問題出在 handleClick 中的流注釋中，我刪除了它並且工作正常，謝謝@alik

Answer 7

問題：道具驗證中缺少“id1”，eslintreact/prop-types

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

以下解決方案在功能組件中起作用：

let { id1 } = props;

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

希望有幫助。

Answer 8

PropTypes 檢查是個好東西，不建議通過設置忽略

您可以使用 vscode React PropTypes Generate 擴展自動生成 propTypes：

1. 選擇您的組件名稱
2. 按命令 + 。 （Windows 是 Ctrl + 。）顯示代碼操作並選擇 PropTypesGenerate，或在 macOS 中按 shift + command + alt + P（Windows 是 shift + ctrl + alt + P）
3. 輸入 propType 替換默認類型

Answer 9

我發現 eslint 在我自己工作的項目中過於嚴格，但是對於這個錯誤，我通過定義我的接口然后實現它來修復它：

interface myInterface: {
  test: string
}

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

Answer 10

從類似問題中復制我的答案： https : //stackoverflow.com/a/69199304/4290193

eslint-plugin-react@^7.25.0似乎已經解決了那些使用React.FC<IProps>和react/prop-types驗證規則的問題。

所以代替

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

更新后現在可以正常工作而不會發出警告

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

Answer 11

函數式反應組件。 定義為對象。 我收到此錯誤是因為我從名稱略有不同的不同對象復制並粘貼了該對象，而忘記更改 proptypes 對象的名稱。

FooterIcons.propTypes = {} -> FooterIcon.propTypes

Answer 12

安裝 prop-types 包 - npm i prop-types --save導入它-

import PropTypes from 'prop-types';

然后指定道具，我是這樣實現的——

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"
  }

Answer 13

代替禁用prop-types規則，我們可以引入 children 屬性作為組件 props 的一部分，例如：

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錯誤消失的典型例子~~

不用擔心開心~~

Answer 14

在新版本的 React 和 Next.js 上，您可以簡單地導入 PropTypes，如下所示，

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

Post.defaultProps = {
  posts: "",
};

Post.propTypes = {
  posts: PropTypes.string,
};

export default Post;

Answer 15

另一種方法是：

---

文件：App.js

    ...
        <Component1 key1="abc" />
    ...

---

文件：Component1.js

1 個錯誤：

    function Component1 ({ key1 }) {
        console.log('key1', key1);
    }

2錯誤：

    function Component1 (props) {
        let{ key1 } = props;
        console.log('key1', key1);
    }

3作品：

注意： prop而不是props

    function Component1 (prop) {
        let{ key1 } = prop;
        console.log('key1', key1);
    }

看起來，linter 只檢查正確的單詞props ，而不是prop或 like。
如果您剛剛開始或快速原型設計，這是一個解決方案。
對於后期或大型項目，定義 proptypes 可能會更好。

---