输入'元素 | undefined' 不可分配给类型 'FC<any> |不明确的'

Question

在这个 MainHeader 组件中：

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

BackButton 是一个 JSX 元素，通过 LeftButton 属性向下传递到 MainHeader，并显式键入为 const BackButton: React.FC<BackButtonProps>，所以我希望 LeftButton 属性的类型如下：

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

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

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

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

Answer 1

如果您的意图是渲染或不渲染某些东西 - 使用 null 而不是 undefined。 null 告诉 react 不要渲染任何东西。

所以：

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

您还可以：

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

关于类型。您最常使用的方法是：

interface MainHeaderProps {
  LeftButton: React.ReactElement;
  ...
}

参见，例如MUI Tab component typings。您还将看到ReactNode 也是一个选项，this SO answer 中描述了差异。

Answer 2

React.FC<any> 是功能组件的类型。一个返回渲染 JSX 的函数。

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

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

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