问在React中添加函数组件的类型

EN

不足以以这种方式键入组件：

是的，够了。你不必重复这些道具的类型，这很好：

const Result: React.FC<ResultProps> = ({ prop1, prop2 }) => {
    // ...
};

操场链接

这是因为您已经设置了Result的类型，所以TypeScript知道函数接受哪些参数及其类型。

关于React.FC的一个注意事项:在Reactive17.x及以下的类型中，当您使用React.FC作为组件时，您说它支持子组件。你的组件不支持孩子，所以我想我应该说出来。许多人开始说不使用React.FC就是因为这个原因:不小心给组件提供错误的类型信息是很容易的。但是在Reactiv18.x和更高版本中，它们更改了React.FC的定义，使其不再假定组件支持子组件。(如果您想这样说，您可以添加PropsWithChildren：React.FC<PropsWithChildren<ResultProps>>。)

因此，如果您使用的是v17.x或更低的版本，并且不希望组件在不支持子组件的情况下说它支持子组件，那么这里有一个替代的方法来为它执行您经常看到的类型：

const Result = ({ prop1, prop2 }: ResultProps) => {
    // ...
};

操场链接

但是，请注意，这依赖于您从组件返回正确的东西，因为如果您忘记返回某个组件或返回对组件无效的东西(比如返回一个普通对象)，则没有返回类型注释TypeScript可以用来帮助您。因此，您还可以包括一个返回类型：

const Result = ({ prop1, prop2 }: ResultProps): JSX.Element => {
    // ...
};

操场链接

但是，在reactiv18.x类型中，React.FC不再假设组件支持子组件。