Question

在此MainHeader组件中：

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

BackButton是一个通过LeftButton属性向下传递到MainHeader的JSX元素，并且显式键入为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告诉您什么都不渲染。

所以：

<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中有所描述。

输入“元素| undefined'不能分配给类型'FC <any> |未定义”

1 个答案: