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

Question

我有什么

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？有更好的方法吗？

Answer 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://stackoverflow.com/a/51486735/5059401

Answer 2

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

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

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

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

Answer 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