输入'元素 | 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<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’没有任何构造或调用签名。”我该如何解决这个问题? 已修复:我错误地调用了道具。React.FC<any>
是功能组件的类型。一个返回渲染 JSX 的函数。
JSX.Element
是功能组件的返回值类型,已经渲染。
所以你可以使用JSX.Element
,像你已经在做的那样传入你的组件,然后用这个简单地显示它,因为你已经传入了道具并渲染了它。
<div>props.LeftButton</div>
【讨论】:
啊,好吧,现在这对我来说更有意义了。谢谢你的解释。以上是关于输入'元素 | undefined' 不可分配给类型 'FC<any> |不明确的'的主要内容,如果未能解决你的问题,请参考以下文章
打字稿:'字符串| undefined' 不可分配给类型 'string'
JWT:'string | 类型的参数undefined' 不可分配给'Secret' 类型的参数