React多三元表达式渲染组件报错':' expected，如何正确闭合？

问题场景 #

创建React组件ColorTag，意图通过嵌套三元表达式，根据props中的tagType（Success、Warning、Danger、Info）渲染对应样式标签，但代码抛出: expected语法错误，怀疑是三元表达式闭合方式问题。

原代码如下：

import React, {Component} from 'react';

import "./styles.scss";

interface ColorTagProps {
    tagType?: string;
    tagText?: string;
}

/**
 * Renders a colored tag according to the received tag color on component props.
 * 
 * - Success
 * - Warning
 * - Danger
 * - Info
 *
 * **/
export class ColorTag extends Component<ColorTagProps> {

    render() {
        return (
            this.props.tagType === "Success" ?
                (
                    <div
                        style={{
                            display: "flex",
                            alignItems: "center",
                            justifyContent: "space-between",
                        }}
                    >
                        <div className="tagType-success">{this.props.tagText}</div>
                    </div>) :
                this.props.tagType === "Warning" ?
                    (
                        <div
                            style={{
                                display: "flex",
                                alignItems: "center",
                                justifyContent: "space-between",
                            }}
                        >
                            <div className="tagType-warning">{this.props.tagText}</div>
                        </div>) :
                    this.props.tagType === "Danger" ?
                    (
                        <div
                            style={{
                                display: "flex",
                                alignItems: "center",
                                justifyContent: "space-between",
                            }}
                        >
                            <div className="tagType-danger">{this.props.tagText}</div>
                        </div>
                    )
        )
    }
}

export default ColorTag;

错误原因 #

三元表达式的语法规则是条件 ? 真值表达式 : 假值表达式，每一层三元都必须包含完整的?和:配对。你的代码中：

• 最后一个this.props.tagType === "Danger"的三元分支只写了?和对应的标签，缺少:以及默认分支（比如处理Info类型或无匹配的情况），导致语法不完整，触发: expected错误。
• 同时遗漏了对Info类型的判断逻辑。

修正方案 #

方案1：补全嵌套三元表达式 #

为每一层三元补全: 分支，包括处理Info类型和默认情况：

import React, {Component} from 'react';

import "./styles.scss";

interface ColorTagProps {
    tagType?: string;
    tagText?: string;
}

/**
 * Renders a colored tag according to the received tag color on component props.
 * 
 * - Success
 * - Warning
 * - Danger
 * - Info
 *
 * **/
export class ColorTag extends Component<ColorTagProps> {

    render() {
        const { tagType, tagText } = this.props;
        return (
            tagType === "Success" ?
                (
                    <div
                        style={{
                            display: "flex",
                            alignItems: "center",
                            justifyContent: "space-between",
                        }}
                    >
                        <div className="tagType-success">{tagText}</div>
                    </div>
                ) :
                tagType === "Warning" ?
                    (
                        <div
                            style={{
                                display: "flex",
                                alignItems: "center",
                                justifyContent: "space-between",
                            }}
                        >
                            <div className="tagType-warning">{tagText}</div>
                        </div>
                    ) :
                    tagType === "Danger" ?
                        (
                            <div
                                style={{
                                    display: "flex",
                                    alignItems: "center",
                                    justifyContent: "space-between",
                                }}
                            >
                                <div className="tagType-danger">{tagText}</div>
                            </div>
                        ) :
                        tagType === "Info" ?
                            (
                                <div
                                    style={{
                                        display: "flex",
                                        alignItems: "center",
                                        justifyContent: "space-between",
                                    }}
                                >
                                    <div className="tagType-info">{tagText}</div>
                                </div>
                            ) : null // 默认情况返回null或其他占位元素
        )
    }
}

export default ColorTag;

方案2：用对象映射替代嵌套三元（更易维护） #

嵌套三元层级过多会降低代码可读性，推荐用对象映射的方式匹配tagType和对应的类名：

import React, {Component} from 'react';

import "./styles.scss";

interface ColorTagProps {
    tagType?: string;
    tagText?: string;
}

/**
 * Renders a colored tag according to the received tag color on component props.
 * 
 * - Success
 * - Warning
 * - Danger
 * - Info
 *
 * **/
export class ColorTag extends Component<ColorTagProps> {
    render() {
        const { tagType, tagText } = this.props;
        // 定义tagType到类名的映射
        const typeClassMap = {
            Success: "tagType-success",
            Warning: "tagType-warning",
            Danger: "tagType-danger",
            Info: "tagType-info"
        };
        // 匹配对应的类名，无匹配则返回null
        const className = typeClassMap[tagType as keyof typeof typeClassMap];
        
        if (!className) return null;
        
        return (
            <div
                style={{
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "space-between",
                }}
            >
                <div className={className}>{tagText}</div>
            </div>
        )
    }
}

export default ColorTag;

内容的提问来源于stack exchange，提问作者Raul Chiarella