向 IF ELSE 添加附加条件

Question

我正在构建我的第一个 Ionic React 应用程序并创建了一个简单的自定义组件，该组件 returns 内容基于两个可选输入值。

当我有一个简单的 if/else if/else 条件时，组件呈现得很好，但是添加一个额外的 'else if' 会阻止它编译，我无法确定原因.

这是工作组件：

import React from 'react';
import './CardContainer.css';

interface ContainerProps {
    position?: string;
    content?: string;
}

const CardContainer: React.FC<ContainerProps> = ({ position = "right", content = "n/a"}) => {
    let cardOutput;
    if ( position.trim().toLowerCase() === "right" ) {
        cardOutput = <><div className="ion-float-right">{content}</div><div className="clear-right"></div></>;
    } else if ( position.trim().toLowerCase() === "left" ) {
        cardOutput = <div className="ion-float-left">{content}</div>;
    } else {
        cardOutput = <div className="ion-float-left">{content}</div>;
    }
    return (
        cardOutput
    )
};


export default CardContainer;

下面是无法编译的代码：

import React from 'react';
import './CardContainer.css';

interface ContainerProps {
    position?: string;
    content?: string;
}

const CardContainer: React.FC<ContainerProps> = ({ position = "right", content = "n/a"}) => {
    let cardOutput;
    if ( position.trim().toLowerCase() === "right" ) {
        cardOutput = <><div className="ion-float-right">{content}</div><div className="clear-right"></div></>;
    } else if ( position.trim().toLowerCase() === "left" ) {
        cardOutput = <div className="ion-float-left">{content}</div>;
    } else if ( position.trim().toLowerCase() === "empty" ) {
        cardOutput = <div className="ion-padding-top">{content}</div>;
    }
    return (
        cardOutput
    )
};

export default CardContainer;

唯一的显着区别是我用 'else if' 替换了 'else' 条件。我尝试添加 'else' 条件只是为了消除可能的原因，但正如预期的那样并不能解决问题。

当我尝试运行我的开发系统上的应用程序时，我得到了这个输出：

Type '({ position, content }: PropsWithChildren) => Element | undefined' is not assignable to type 'FC'. Type 'Element | undefined' is not assignable to type 'ReactElement<any, any> | null'. Type 'undefined' is not assignable to type 'ReactElement<any, any> | null'.ts(2322)

对于我缺乏经验的人来说，这并没有给我太多关于 TypeScript 之外的问题的迹象。

Answer 1

这是因为您的数据可能位于if条件中，因此声明的变量cardoutput仍未定义。

let cardOutput;//undefined

所以尝试使用 else 条件，这样 cardoutput 就不会未定义

Answer 2

你是对的，这是一个 TypeScript 错误，更具体地说，TypeScript 期望 CardContainer 是一个功能组件，但是你当前的代码使得 CardContainer 有可能 return 未定义，因此错误识别类型为 Element | undefined

的组件

没有 else 条件，默认的 else 行为是它 returns cardOutput 是未定义的（因为它不属于定义它的任何 if 或 if/else 语句）。

向 IF ELSE 添加附加条件

Adding Additional Conditions To IF ELSE

reactjs

typescript

ionic4

ionic-react