Reactjs 类型脚本react组件中的react/prop types eslint错误

我正在尝试设置

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;

它似乎在抱怨html的接口

没有定义？ 否则它可能是

按钮

组件本身，但它是否应该从我传递到那里的

接口获取类型信息

我尝试明确地设置

子项

和

onClick

，如下所示：

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

它绕过eslint错误，但组件本身停止工作。 我做错了什么

另外，这是我的

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

---

我最终将组件改写为：

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

const按钮=（{children，onClick}:ButtonProps）=>{
返回
{儿童}
;
};

---

eslint忽略了

：React.FC

部分，因此我决定以更直接的方式提供道具类型

关于您答案的更多信息。

首先，这两种方法对于声明类型都是正确的，但是React.FC有一些额外的好处。

在您的场景中，您可能正在使用eslint react插件，它为eslint推荐了“plugin:react/recommended”规则，
检查proptypes的规则就是其中之一，检查typescript示例。

---

所以react/prop types规则将与TS接口冲突，这就是为什么它显示错误，一旦您添加：ButtonProps，我们就不必提供react.FC

这个规则对于TypeScript没有意义，因为您已经在检查类型

在这里，您找到了一种禁用此规则的简单方法，只需添加eslint配置：

规则：{
“反应/道具类型”：0
}

在参数中使用默认值

=（{onClick:（）=>{}，子项：null}）=>（

您不需要将

按钮操作中的
子项定义为
React。FunctionComponent
已经将其定义为：
子项？：ReactNode
。此外，您可以使用
React.FC
而不是非常冗长的
React.FunctionComponent
如果我没有在
按钮操作中定义子项，则什么都没有更改：错误仍然抱怨
子项
和
onClick
。在
const按钮：React.FC=props=>中，界面似乎被忽略了……
FYI您链接到的页面已更新为“今天的普遍共识是React.FunctionComponent（或速记React.FC）不受欢迎”
const Button = ({ children, onClick }: ButtonProps) => {
  return <button onClick={onClick} style={styles} type="button">
    {children}
  </button>;
};