打字稿反应组件中的反应/道具类型eslint错误

Posted 2023-02-22

【中文标题】打字稿反应组件中的反应/道具类型eslint错误

【英文标题】：react/prop-types eslint error in typescript react component

【发布时间】：2020-04-08 11:10:52

【问题描述】：

我正在尝试设置一个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 错误，但组件本身停止工作。 我做错了什么？

附：这是我的.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"
        ]
    

【问题讨论】：

在参数<ButtonProps> = ( onClick: () => , children: null ) => (中使用默认值

您不需要在ButtonProps 中定义children，因为React.FunctionComponent<T> 已经将其定义为：children?: ReactNode。此外，您可以使用React.FC 而不是非常冗长的React.FunctionComponent

如果我没有在ButtonProps 中定义孩子，则不会有任何变化：错误仍然会抱怨children 和onClick。 const Button: React.FC<ButtonProps> = props => ...

中似乎忽略了该接口

【参考方案1】：

我最终将组件重写为：

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

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

【参考方案2】：

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

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

  rules: 
    'react/prop-types': 0
  

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

【参考方案3】：

您的答案的更多信息..

首先，两种方式都可以正确声明类型，但是 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

【讨论】：

仅供参考，您链接到的页面已更新为“今天的普遍共识是不鼓励使用 React.FunctionComponent（或简写 React.FC）”

【参考方案4】：

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) => ...

【讨论】：

太棒了，效果很好！