Website-Suche

reactjs - react/prop-types eslint-Fehler in einer TypeScript-React-Komponente

Ich versuche, ein typescript-react-eslint-Projekt einzurichten, und komme bei diesem Boilerplate-Komponenten-Fehler von eslint nicht weiter:

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;

Der Fehler ist:

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

Es scheint, als würde es sich darüber beschweren, dass das Interface für HTML <button> nicht definiert ist? Andernfalls könnte es das Button-Component selbst sein, aber sollte es nicht Typinformationen vom <ButtonProps>-Interface erhalten, das ich dort übergebe?

Ich habe versucht, children und onClick explizit so zu setzen:

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

Es umgeht den eslint-Fehler, aber die Komponente selbst hört auf zu funktionieren. Was mache ich falsch?

P.S. Dies ist meine .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"
        ]
    }
}

Antwort #1

Ich habe schließlich die Komponente wie folgt umgeschrieben:

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

Der : React.FC<ButtonProps>-Teil wurde von eslint ignoriert, also habe ich beschlossen, die Prop-Typen auf eine direktere Weise anzugeben.

Antwort #2

Diese Regel ergibt mit TypeScript keinen Sinn, weil du bereits die Typen überprüfst.

In dieser Frage haben Sie eine einfache Möglichkeit gefunden, diese Regel zu deaktivieren, fügen Sie einfach Folgendes in Ihre ESLint-Konfiguration ein:

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

Um lesbarer zu sein, können Sie "off" statt "0" verwenden.

Verwandte Artikel