React 组件 - 元素 |不明确的

Posted 2023-03-08

【中文标题】React 组件 - 元素 |不明确的

【英文标题】：React Componet - Element | undefined

【发布时间】：2021-03-03 08:17:12

【问题描述】：

Ionic Modal 作为 React 组件实现我收到了这条消息：

类型 '( onClose, tipo : PropsWithChildren) => 元素 | undefined' 不可分配给类型 'FC'。输入'元素 |未定义'不是 可分配给类型 'ReactElement |空值'。 类型 'undefined' 不可分配给类型 'ReactElement |空'.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>
      </>
    );
  
;

【问题讨论】：

如果tipo 不是 0、1 或 2，它会返回什么？

【参考方案1】：

如果拼写错误只有三个可能的值，那么定义它

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

你的错误必须消失 :)