Astro 渲染“0”而不是 html

Question

对于语言切换器如果有这种情况：

{
    !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>
        )
    )
}

根据是否是博客文章的链接，它会呈现不同的链接。 当 isArticleLink 为 false 时，工作正常，它输出“NL|EN”。 然而，当 isArticleLink 为 true 时，它输出“0|0”。

我检查了 postEN 和 postNL 对象，它们都引用了正确的对象，所以我不知道是什么导致了这个问题。

有谁知道发生了什么事，或者你的 Astro 代码有问题吗？

Answer 1

您不小心在两个 JSX 元素之间使用了按位 OR 运算符 (

|

)。两个非数字值的按位或为 0

('a' | 'b') === 0

。您正在寻找的正确语法是 JSX 片段：

    <>
        <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>
    </>