元素不可分配给类型 'FC<ContainerProps>'

Question

我通过为自己创建一个项目来学习 React/Ionic/Typescript，并且偶然发现了一种我想更好地理解的情况。我创建了以下自定义组件：

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() === "full" ) {
        cardOutput = <div className="">{content}</div>
    }
    else if ( position.trim().toLowerCase() === "empty" ) { 
        cardOutput = <div className="">&nbsp;</div> 
    }
    return( cardOutput );
};

export default CardContainer;

这按预期工作。但是，我认为将结果转储到变量中然后在最后 return 变量有点不必要。所以，我改为 return 每个条件语句下的相关 jsx 块。见下文：

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

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

const CardContainer: React.FC<ContainerProps> = ({ position = "right", content = "n/a" }) => {

    if ( position.trim().toLowerCase() === "right" ) {
        return( <><div className="ion-float-right" >{content}</div><div className="clear-right"></div></> )
    } else if ( position.trim().toLowerCase() === "left" ) {
        return( <div className="ion-float-left">{content}</div> )
    } else if ( position.trim().toLowerCase() === "full" ) {
        return( <div className="">{content}</div> )
    }
    else if ( position.trim().toLowerCase() === "empty" ) { 
        return( <div className="">&nbsp;</div> )
    }
};

export default CardContainer;

但是，第二个代码版本无法编译并且 VS 代码给出以下错误 - 目前对我来说意义不大：

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

我完全不知道我需要做什么来解决这个问题，但我想从中吸取教训并理解“问题”是什么以及为什么。如果能解决这个问题显然会更好。

谢谢。

Answer 1

如果所有 if/else if 条件都失败，则组件将 return undefined。

您可以在最后简单地 return null 来修复错误，如果所有条件都失败则不渲染任何内容。

const CardContainer: React.FC<ContainerProps> = ({ position = "right", content = "n/a" }) => {

    if ( position.trim().toLowerCase() === "right" ) {
        return( <><div className="ion-float-right" >{content}</div><div className="clear-right"></div></> )
    } else if ( position.trim().toLowerCase() === "left" ) {
        return( <div className="ion-float-left">{content}</div> )
    } else if ( position.trim().toLowerCase() === "full" ) {
        return( <div className="">{content}</div> )
    }
    else if ( position.trim().toLowerCase() === "empty" ) { 
        return( <div className="">&nbsp;</div> )
    }

    return null;
};

这在您的第一个片段中不是问题，因为 let cardOutput = <></> 将 return 片段而不是 undefined。

元素不可分配给类型 'FC<ContainerProps>'

Element is not assignable to type 'FC<ContainerProps>'

typescript

reactjs

ionic-react