由 unsplash 提供

键入 React/React Native 组件并不总是必要的,类型通常由 return 语句隐含,但有时我们需要,并且有一些方法可以键入它。

最常见的可能是使用 react 已经提供的接口:FC,意思是功能组件,如果组件接受 props,我们只需要在其上添加 prop 类型:FC<MyProps>。

返回类型隐含的另一个是 JSX.Element 并且也被广泛使用,并且在 React 18 之前,这种方法更可靠。

使用 React.FC 的缺点

在 React 18 之前,使用 FC 存在潜在问题, 它默认有一个隐含的 children 道具,因此任何使用 FC 类型的组件的人都可以在其上传递一个子项:

这不再是一个问题,因为在 React 18 中它被删除了,所以如果你的项目在 18 或更高版本上运行,则无需担心。

使用 JSX.Element 的缺点

如果您不声明它,这是隐式返回类型。但是假设你的组件不会总是返回一个有效的 JSX.Element,有时我们想返回 null 或者只是一个字符串,JSX.Element 是不够的,我们将开始添加其他返回类型: JSX.Element |无效的:

不输入组件

这也是一个选项,并且可能会正常工作,typescript 可以理解和使用隐式类型,只有在您的项目强制执行需要显式键入所有内容的 eslint 规则时才会起作用。

使用示例

具有相同功能的相同按钮类型和两种不同类型的基本示例:

结论

我看不出使用一个选项而不是另一个选项的充分理由,JSX 仍然通过不允许返回字符串或空值来更严格地使用它,但不使用它也没什么大不了的。最后,更多的是我们想在我们的项目中使用什么类型,甚至不输入静止图像。

我个人的选择是使用 React.FC,大多数新的 typescript 用户发现它更易于使用,而且在我看来它使代码更易于阅读。