Eslint：功能组件中的默认道具有问题(TypeScript-Reaction) [英] Eslint: Problem with default props in functional component (Typescript - React)

问题描述

我拥有的内容

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 Reaction插件报告此错误ESLint: propType "gretting" is not required, but has no corresponding defaultProps declaration.(react/require-default-props)。

与此answer使用默认参数defaultProps的方法一样，它很好，那么解决这个问题的最好方法是什么？使用Hello.defaultProps = {}还是关闭规则react/require-default-props？还有更好的办法吗？

推荐答案

我为功能组件找到了另一个解决方案--您可以只使用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：功能组件中的默认道具有问题(TypeScript-Reaction)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！