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

Posted

技术标签:

【中文标题】输入\'元素 | 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&lt;BackButtonProps&gt;,所以我希望 LeftButton 属性的类型如下:

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

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

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

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

【问题讨论】:

【参考方案1】:

如果您的意图是渲染或不渲染某些东西 - 使用 null 而不是 undefinednull 告诉 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&lt;any&gt; 是功能组件的类型。一个返回渲染 JSX 的函数。

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

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

<div>props.LeftButton</div>

【讨论】:

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

以上是关于输入'元素 | undefined' 不可分配给类型 'FC<any> |不明确的'的主要内容,如果未能解决你的问题,请参考以下文章

React 组件 - 元素 |不明确的

将标准输入中的字符串分配给类成员变量

打字稿:'字符串| undefined' 不可分配给类型 'string'

JWT:'string | 类型的参数undefined' 不可分配给'Secret' 类型的参数

键入'可观察<用户 |空 | undefined>' 不可分配给类型 'Observable<User>'

类型“”不可分配给类型“JwtConfig”