web-dev-qa-db-fra.com

Erreur ESLint Types de réaction / PROP

J'essaie de mettre en place un TypeScript-react-eslint Projet et ne peut pas passer au-delà d'une erreur ESLint pour ce composant de la chaudière:

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;

L'erreur est:

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

Il semble que cela se plaint de l'interface pour HTML <button> n'est pas défini? Sinon, ce serait peut-être le composant Button lui-même, mais ne devrait pas obtenir d'informations de type de <ButtonProps> interface je passe là-bas?

J'ai essayé explicitement définir children et onClick comme ceci:

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

il contourne l'erreur ESLint, mais le composant lui-même cesse de fonctionner. Qu'est-ce que je fais mal?

P.s. C'est mon .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"
        ]
    }
}
reactjstypescripteslint
8
MaxPY

Plus d'infos à votre réponse ..

Premièrement, les deux voies sont correctes pour les types de déclaration, mais réact.fc a des avantages supplémentaires. https://github.com/typescript-cheetsheets/react-typescript-cheatheet/blob/master/readme.md#function-Components

enter image description here

Et dans votre scénario, vous pouvez utiliser ESLint-React-plugin qui a recommandé des règles 'Plugin: réagir/recommandé' pour Eslint,
Règle pour vérifier les proptypes en est un parmi eux, vérifiez l'exemple dossier. https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/roules/prop-types.md

La règle de réaction/des types de propbilles se conflit avec les interfaces TS, c'est pourquoi elle indique cette erreur, une fois que vous avez ajouté: ButtonProps, nous n'avons pas à fournir réact.fc

3
Hemanthvrm