reactjs - 类型 'Element | undefined' 不可分配给类型 'FC<any> | undefined'

Question

在这个 MainHeader 组件中:

<MainHeader
  LeftButton={
    previous ? (
      <BackButton
        onPress={() => {
          navigation.goBack;
        }}
      />
    ) : (
      undefined
    )
  }
  ...
/>

BackButton 是一个 JSX 元素，通过 LeftButton 属性向下传递到 MainHeader，并显式输入为 const BackButton: React.FC<BackButtonProps> ，那么我希望 LeftButton Prop 的输入方式如下:

interface MainHeaderProps {
  LeftButton: React.FC<any> | undefined;
  ...
}

但是我在尝试分配 BackButton 时遇到此错误 |未定义 LeftButton Prop :Type 'Element | undefined' is not assignable to type 'FC<any> | undefined'. ...所以我将类型更改为

interface MainHeaderProps {
  LeftButton: JSX.Element | undefined;
  ...
}

错误消失了。但是现在当我尝试使用 <LeftButton /> 时出现错误在 MainHeader 中:JSX element type 'LeftButton' does not have any construct or call signatures.因此，在阅读了一些内容之后，我对应该使用哪种类型感到更加困惑……我尝试了 @types/react 中的许多不同类型就像 ComponentType 尝试通过其构造函数定义 LeftButton，但 TypeScript 强制将 LeftButton 键入为 JSX.Element，所以我不确定如何最好地解决这个问题。

Answer 1

React.FC<any>是功能组件的类型。返回呈现的 JSX 的函数。

JSX.Element是已渲染的功能组件的返回值类型。

所以你可以使用JSX.Element ，像您已经做的那样传入您的组件，然后简单地显示它，因为您已经传入 Prop 并渲染它。

<div>{props.LeftButton}</div>