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

Posted 2023-02-22

【中文标题】输入\'元素 | undefined\' 不可分配给类型 \'FC<any> |不明确的\'

【英文标题】：Type 'Element | undefined' is not assignable to type 'FC<any> | undefined'输入'元素 | undefined' 不可分配给类型 'FC<any> |不明确的'

【发布时间】：2020-04-22 10:55:47

【问题描述】：

在这个 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，所以我不确定如何最好地解决这个问题。

【参考方案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 中描述了差异。

【讨论】：

感谢您的回答。当输入为 React.ReactElement 而不是 JSX.Element 时，我仍然遇到完全相同的问题：“JSX 元素类型‘LeftButton’没有任何构造或调用签名。”我该如何解决这个问题？

已修复：我错误地调用了道具。 而不仅仅是 LeftButton 新功能组件。

【参考方案2】：

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

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

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

<div>props.LeftButton</div>

【讨论】：

啊，好吧，现在这对我来说更有意义了。谢谢你的解释。