javascript - React 组件 - 元素 | 不明确的

Question

将 Ionic Modal 实现为 React 组件我收到以下消息：

类型 '({ onClose, tipo }: PropsWithChildren<{ onClose: any; tipo: number; }>) => 元素 | undefined' 不可分配给类型 'FC<{ onClose: any; 提示：数字；}>'。输入'元素 | undefined' 不可分配给类型 'ReactElement<any, any> | 无效的'。类型 'undefined' 不可分配给类型 'ReactElement<any, any> | 空'.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>
      </>
    );
  }
};

标签： javascriptreactjstypescriptionic-frameworkfc

Answer 1

如果错字只有三个可能的值，请像这样定义

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

你的错误必须消失:)