React Component-元素|未定义

Question

将离子模态实现为React组件我得到了以下消息：

Type'(｛onClose，tipo}：PropsWithChildren<｛onClose:any；tipo:数字；｝>(=>元素"|undefined"不可分配给类型"FC<{onClose：任意；tipo:number；｝>'。类型"Element | undefined"不是可分配给类型"ReactElement<任意，任意>|null。类型"undefined"不可分配给类型"ReactElement<任意，任意>|null’.ts(2322(

我看不出问题，因为组件返回元素。所以这不是函数返回的问题。

这就是有问题的代码。

const MyModal: React.FC<{ onClose: any; tipo: number }> = ({
onClose,
tipo
}) => {
if (tipo === 0) {
return (
<>
<IonHeader>
<IonToolbar>
<IonIcon
icon={arrowBack}
onClick={() => onClose(null)}
slot="start"
id="flecha-volver"
>
{" "}
</IonIcon>
</IonToolbar>
</IonHeader>
<IonContent>
<div id="contenedor-central">
<IonGrid>
<IonRow>
<strong id="elementos">Usuario no registrado</strong>
</IonRow>
<IonRow>
<IonButton href="/registro" id="elementos">
Registrarse
</IonButton>
</IonRow>
</IonGrid>
</div>
</IonContent>
</>
);
}
if (tipo === 1) {
return (
<>
<IonHeader>
<IonToolbar>
<IonIcon
icon={arrowBack}
onClick={() => onClose(null)}
slot="start"
id="flecha-volver"
></IonIcon>
</IonToolbar>
</IonHeader>
<IonContent>
<div id="contenedor-central">
<strong>Usuario no registrado</strong>
</div>
<IonButton href="/registro">Registrarse</IonButton>
<IonItem>Click List Item To Return Selected Value</IonItem>
</IonContent>
</>
);
}
if (tipo === 2) {
return (
<>
<IonHeader>
<IonToolbar>
<IonIcon
icon={arrowBack}
onClick={() => onClose(null)}
slot="start"
id="flecha-volver"
>
{" "}
</IonIcon>
</IonToolbar>
</IonHeader>
<IonContent>
<div id="contenedor-central">
<IonGrid>
<IonRow>
<strong id="elementos">Categorías</strong>
</IonRow>
<IonRow>
<IonButton href="/registro" id="elementos">
Registrarse
</IonButton>
</IonRow>
</IonGrid>
</div>
</IonContent>
</>
);
}
};

Answer 1

如果打字错误只有三个可能的值，则将其定义为

type Typo = 1 | 2 | 3;
const MyModal: React.FC<{onClose: any; tipo: Typo;}>

您的错误必须消失：(