打字稿反應組件中的反應/道具類型eslint錯誤

Question

我正在嘗試設置一個typescript-react-eslint項目，並且無法通過此樣板組件的 eslint 錯誤：

import * as React from "react";

interface ButtonProps {
  children?: React.ReactNode,
  onClick?: (e: any) => void,
}

const styles = {
  border: "1px solid #eee",
  borderRadius: 3,
  backgroundColor: "#FFFFFF",
  cursor: "pointer",
  fontSize: 15,
  padding: "3px 10px",
  margin: 10
};

const Button: React.FunctionComponent<ButtonProps> = props => (
  <button onClick={props.onClick} style={styles} type="button">
    {props.children}
  </button>
);

Button.defaultProps = {
  children: null,
  onClick: () => {}
};
export default Button;

錯誤是：

  19:26  error  'onClick' is missing in props validation   react/prop-types
  20:12  error  'children' is missing in props validation  react/prop-types

似乎它在抱怨 html <button>的接口未定義？ 否則它可能是Button組件本身，但它不應該從我傳遞的<ButtonProps>接口獲取類型信息嗎？

我嘗試像這樣顯式設置children和onClick ：

Button.propTypes = {
  children?: React.ReactNode,
  onClick?: (e: any) => void
};

它繞過了 eslint 錯誤，但組件本身停止工作。 我究竟做錯了什么？

PS 這是我的.eslintrc.json

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/eslint-recommended"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "settings": {
        "react": {
            "pragma": "React",
            "version": "detect"
        }
    },
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    "rules": {
        "indent": [
            "error",
            2
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "double"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
}

Answer 1

我最終將組件重寫為：

const Button = ({ children, onClick }: ButtonProps) => {
  return <button onClick={onClick} style={styles} type="button">
    {children}
  </button>;
};

: React.FC<ButtonProps>部分被 eslint 忽略了，所以我決定以更直接的方式提供 prop 類型

Answer 2

此規則對 TypeScript 沒有意義，因為您已經在檢查類型。

在這個問題中，您找到了一種禁用此規則的簡單方法，只需添加您的 eslint 配置：

  rules: {
    'react/prop-types': 0
  }

為了更具可讀性，您可以使用“off”而不是“0”。

Answer 3

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 4

您的答案的更多信息..

首先，這兩種方式對於聲明類型都是正確的，但是 React.FC 有一些額外的好處。 https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/blob/master/README.md#function-components

在您的場景中，您可能正在使用 eslint-react-plugin ，它為 eslint 推薦了規則 'plugin:react/recommended' ，
檢查 proptypes 的規則就是其中之一，檢查 typescript 示例。 https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prop-types.md

所以 react/prop-types 規則會與 TS Interfaces 沖突，這就是為什么它會顯示該錯誤，一旦添加：ButtonProps，我們就不必提供 React.FC