propType "name" 不是必需的，但没有相应的 defaultProps 声明

Question

我有一个带有可选道具的组件。我通过将可选道具的默认值传递给Card组件来定义它们，然而esint一直告诉我propType "text" is not required, but has no corresponding defaultProps declaration.。children道具也是如此。下面的代码似乎与本页上的示例without defaultProps一致：https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/require-default-props.md.

import { ReactElement } from 'react';
interface CardProps {
title: string,
text?: string | (string|ReactElement)[],   // eslint is complaining here
children?: React.ReactNode                 // and here
}
const Card = ({ title, text = '', children = null }: CardProps) => (
<div className="container">
<div className="title">{title}</div>
<div className="underline" />
<div className="card">
<div className="text">
{text}
{children}
</div>
</div>
</div>
);

我的esint(7.32.0)配置如下：

{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"plugin:react/recommended",
"airbnb"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": [
"react",
"@typescript-eslint"
],
"rules": {
"react/jsx-filename-extension": [1, { "extensions": [".ts", ".tsx"] }],
"react/jsx-uses-react": "off",
"react/react-in-jsx-scope": "off",
"import/extensions": [
"error",
"ignorePackages",
{
"js": "never",
"jsx": "never",
"ts": "never",
"tsx": "never"
}
],
"no-use-before-define": "off",
"@typescript-eslint/no-use-before-define": ["error"]
},
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".jsx", ".ts", ".tsx"]
}
}
},
"globals": {
"React": true,
"JSX": true
}
}

Answer 1

TLDR：关闭规则

我也在使用ESLint 7.32.0(和TS 4.4.4)，遇到了同样的问题。我已经深入研究了这方面的问题，并找到了三种方法来阻止ESLint消息。

1)

首先是直接使用defaultProps，这对于函数组件是不推荐的。在你的情况下，它看起来像：

Card.defaultProps = {
text: '',
children: null,
}

在Card功能声明之后。但这是一种反模式。

2)

其次是导出接口。为什么这样做仍然是个谜。

3)

第三种是使用React.FC函数类型模式。这有很多缺点，我不使用它，可能是出于与您类似的原因。

结论

这些技术都不令人满意，而且由于defaultTypes已经被弃用，因此最好关闭ESLint规则，而不是根据自己的喜好重新配置代码。

Answer 2

您可以按照以下方式在eslintrc.json中配置rule，并且仍然可以保持一些有用的警告、错误规则。

...
"react/require-default-props": [
"error", 
{
"forbidDefaultForRequired": true,        
"functions": "defaultArguments" //Here
}
]
...

更多信息，请参阅此

Answer 3

正如@Jack提到的

export interface Props {
children?: ReactNode;
}

导出接口成功！

Answer 4

此外，您可以使字段类型联合，而不是可选的(?:)，这使字段值默认为未定义，如下所示：

export interface CardProps {
title: string,
text: undefined | string | (string|ReactElement)[],
children: undefined | React.ReactNode,
}

提供defaultProps并不总是容易或可能的，其中一些字段可能从服务器的文件或资源加载，在某些情况下不会有占位符，比如文件树。。。