[TYPESCRIPT]：react/require-default-props 在我的 .eslintrc 配置中无法正常工作

Question

我正在用这种方式在 typescript 中设置默认道具

type Props = {
  message?: string,
  disableElevation?: boolean,
};

const BoxError = ({ message = 'Oops! Something went wrong!', disableElevation = false }: Props) => {

  return (
    <div>mybox error</div>
  )
}

但我总是收到错误react/require-default-props

使用的.eslintrc是这样的：

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": [
      "./tsconfig.json"
    ]
  },
  "plugins": [],
  "extends": [
    "airbnb-typescript",
    "airbnb/hooks",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking"
  ],
  "env": {
    "browser": true,
    "node": true,
    "jquery": true,
    "mocha": true
  },
  "globals": {
    "Routing": true
  },
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
    "react-redux/connect-prefer-named-arguments": 0,
    "no-console": 2,
    "no-continue": "off",
    "no-undef": 0,
    "react/prefer-stateless-function": 2,
    "react/jsx-filename-extension": 0,
    "func-names": 0,
    "no-underscore-dangle": 0,
    "no-param-reassign": [ "error", { "props": false }],
    "semi": [2, "never"],
    "@typescript-eslint/semi": "off",
    "max-len": ["error", 200, 2, {
      "ignoreUrls": true,
      "ignoreComments": false,
      "ignoreRegExpLiterals": true,
      "ignoreStrings": true,
      "ignoreTemplateLiterals": true
    }],
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never"
      }
    ],
    "curly":["error","all"],
    "jsx-a11y/click-events-have-key-events": 0,
    "jsx-a11y/no-noninteractive-element-interactions": 0,
    "jsx-a11y/label-has-for": 0,
    "react/jsx-closing-tag-location": 0
  },
  "settings": {
    "import/resolver": {
      "webpack": {
        "config": "webpack.common.js"
      }
    }
  },
}

我做错了什么？

Answer 1

尝试下一个示例：

type Props = {
  message?: string,
  disableElevation?: boolean,
};

const BoxError = ({ message = 'Oops! Something went wrong!', disableElevation = false }: Props) => {

  return (
    <div>mybox error</div>
  )
}

BoxError.defaultProps = {
  message: '',
  disableElevation: false,
}