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

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

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 2

我有的

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 3

我有的

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 4

在此处输入图片说明

这是我的代码。 我使用“componentName”.defaultProps={ variable:defaultValue, } 来解决问题。希望它会有所帮助。