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)。

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

Answer 1

我找到了另一种功能组件的解决方案 - 您可以使用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

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