Eslint：功能组件中的默认道具问题（Typescript - React）

Posted 2023-02-22

【中文标题】Eslint：功能组件中的默认道具问题（Typescript - React）

【英文标题】：Eslint: Problem with default props in functional component (Typescript - React)

【发布时间】：2020-12-21 02:28:20

【问题描述】：

我有什么

import  NextPage  from 'next';
import React from 'react';

interface Props 
  name: string;
  gretting?: string; // Error: ESLint: propType "gretting" is not required, but has no corresponding defaultProps declaration.(react/require-default-props) 


const Hello: React.FunctionComponent<Props> = ( name, gretting = 'night' : Props) =>
  <p>Hi name Good gretting</p>;

const Home: NextPage = () => <Hello name="Jhon Doe" />;

export default Home;

问题

Eslint react 插件抱怨这个错误ESLint: propType "gretting" is not required, but has no corresponding defaultProps declaration.(react/require-default-props).

根据这个answer 使用默认参数值defaultProps 的方法很好，那么解决这个问题的最佳方法是什么？使用Hello.defaultProps = 还是关闭规则react/require-default-props？有更好的方法吗？

【问题讨论】：

Props 声明为nombre, saludo，但解构为name, gretting。该代码真的是您拥有的吗？因为那是行不通的。

@AlexWayne 很抱歉是我的错，我已更正

【参考方案1】：

当传递的 prop 为 null 或 undefined 时使用 defaultProp

interface Props 
  name: string;
  gretting?: string;// question mark means it could be undefined

在这个界面中，您将 name 声明为字符串，这意味着它不会为 null 或未定义， 所以你可以跳过 defaultProp 但是 gretting 被声明为字符串或未定义，所以有一个更改它将是未定义的，所以它的 defaultProp 是必要的

Hello.defaultProps = 
  gretting: '',
;

编辑：根据这个答案发现你需要 Typescript 3.0：https://***.com/a/51486735/5059401

【讨论】：

每当我在 props 中使用?: 时，都应该用defaultProps = ? 显式声明它们的默认值，另外，属性的默认值没有传入gretting = 'night'？

是的，react/require-default-props 不考虑你的参数默认值，它只检查 defaultProps，在这种情况下你可以简单地禁用它

我不清楚，我应该全局禁用规则还是仅在这种情况下禁用？因为每当我需要使用可选的 prop(?:) 时禁用规则效率非常低...或者更好，我应该始终设置myCompnent.defaultProps = insted of param defaults？

defaultProps 用于js。 Typescript 还有另一种声明道具类型的方法

【参考方案2】：

我遇到了这个问题，并通过导出类型或接口来解决它，但我无法解释为什么这是解决问题的方法。

export interface Props 
  name: string;
  greeting?: string;


const Hello = (name, greeting = 'Hi': Props): JSX.Element = 

编辑：根据这个答案发现你需要 Typescript 3.0：https://***.com/a/51486735/5059401

【参考方案3】：

我找到了另一种功能组件的解决方案 - 您可以使用 React.FC，它为 defaultProps 等静态属性提供类型检查和自动完成功能。

const Hello: React.FC<name: string, gretting: string> = ( name, gretting = 'night' ) =>

在这种情况下，您根本不必使用界面。但如果您出于某种原因想要：

const Hello: React.FC<IProps> = ( name, gretting = 'night' ) =>

===== 更新=====

另外：

"react/prop-types": "off" // Since we do not use prop-types

"react/require-default-props": "off" // Since we do not use prop-types

【讨论】：

我无法重现这一点，在我的情况下eslint 继续在界面中显示相同的错误...我需要更多上下文，你是否在某个地方使用Hello.defaultProps = 或其他一些你不要在答案中发布？

不，我没有使用 defaultProps，我将 FunctionalComponent 与 FC 切换，并从括号中删除了接口类型。我还使用了非常严格的 eslint 配置和完整的 airbnb。我在这里找到了这个解决方案：pluralsight.com/guides/…

我添加了更新。这个 eslint 规则对 React + TS 组合没有意义。

React.FC 上的任何 cmets 不鼓励？ github.com/facebook/create-react-app/pull/8177