Astro语言切换器渲染异常：显示0而非HTML的问题排查

问题描述 #

为语言切换器编写条件渲染逻辑：当isArticleLink为false时，NL|EN链接可正常渲染；但当isArticleLink为true时，页面显示0|0而非预期的HTML链接。已确认postEN和postNL对象指向正确，需排查代码问题。

原代码 #

{
    !isArticleLink ? (
        <a
            href={href}
            class:list={[cn(className, { 'border-b-4 border-regalblue pb-2': isActive })]}
            {...props}
        >
            {language}
        </a>
    ) : (
        (
            <a
                href={`/en/blog/${postNL?.data.translation}`}
                class:list={[cn(className, { 'border-b-4 border-regalblue pb-2': isActive })]}
                {...props}
            >
                EN
            </a>
        ) |
        (
            <a
                href={`/nl/blog/${postEN?.data.translation}`}
                class:list={[cn(className, { 'border-b-4 border-regalblue pb-2': isActive })]}
                {...props}
            >
                NL
            </a>
        )
    )
}

问题原因 #

核心错误是在JSX分支中使用了|运算符——这在JavaScript中是按位或操作，并非用于拼接HTML元素。

当用括号包裹两个<a>标签时，它们会被当作JavaScript表达式求值。Astro的JSX元素本质是对象，对象在参与按位或运算时会被强制转换为数字（默认转换结果为0），最终计算结果为0 | 0 = 0，页面也就显示了0|0。

修复方案 #

要渲染多个并列元素，需要用JSX Fragment（<>和</>）包裹，同时把分隔符|作为文本节点放在两个链接之间：

{
    !isArticleLink ? (
        <a
            href={href}
            class:list={[cn(className, { 'border-b-4 border-regalblue pb-2': isActive })]}
            {...props}
        >
            {language}
        </a>
    ) : (
        <>
            <a
                href={`/en/blog/${postNL?.data.translation}`}
                class:list={[cn(className, { 'border-b-4 border-regalblue pb-2': isActive })]}
                {...props}
            >
                EN
            </a>
            {' | '}
            <a
                href={`/nl/blog/${postEN?.data.translation}`}
                class:list={[cn(className, { 'border-b-4 border-regalblue pb-2': isActive })]}
                {...props}
            >
                NL
            </a>
        </>
    )
}

补充说明 #

如果不需要分隔符，直接去掉|，将两个<a>标签放在Fragment中即可。Fragment的作用是让多个元素成为合法的JSX表达式返回值，避免出现“相邻JSX元素必须被包裹”的错误。

内容的提问来源于stack exchange，提问作者Anthony Candaele