유형 스크립트 반응 구성 요소의 반응/prop-typeeslint 오류

유형 스크립트 반응 구성 요소의 반응/prop-typeeslint 오류

다음을 설정하려고 합니다.typescript-react-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"
        ]
    }
}

구성 요소를 다음과 같이 다시 작성했습니다.

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

그: React.FC<ButtonProps>부품이 에스린트에 의해 무시되어 저는 좀 더 간단한 방법으로 소품 종류를 제공하기로 결정했습니다.

이미 유형을 확인하고 있기 때문에 이 규칙은 TypeScript에서 의미가 없습니다.

이 질문에서는 이 규칙을 비활성화하는 간단한 방법을 찾았습니다. eslint 구성에 다음을 추가하십시오.

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

읽기 쉽도록 "0" 대신 "off"를 사용할 수 있습니다.

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

답변에 대한 추가 정보..

첫째, 두 가지 방법 모두 유형을 선언하는 것이 올바르지만 대응합니다.FC에는 몇 가지 추가적인 이점이 있습니다.https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/blob/master/README.md#function-components

그리고 당신의 시나리오에서는 eslint에 대해 'plugin:react/recommended' 규칙을 권장하는 eslint-react-plugin을 사용하고 있을 수 있습니다.
그 중에서도 프롭타입을 확인하는 규칙이 있는데, 스크립트의 예를 확인합니다.https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prop-types.md

따라서 react/prop-types 규칙이 TS 인터페이스와 충돌합니다. 따라서 ButtonProps를 추가하면 React를 제공할 필요가 없습니다.FC

언급URL : https://stackoverflow.com/questions/59348989/react-prop-types-eslint-error-in-typescript-react-component