如何在JavaScript和React的三元运算符中新增逻辑实现条件展示图标

你写的代码存在两个语法问题：

• 三元运算符的冒号（:）分支只能返回单个表达式，你直接写了两个独立的JSX表达式不符合语法要求
• 代码存在多余的大括号、标签未闭合的语法错误

修改后的代码如下，完全符合你的需求：

const variableType = 'INTEGER';
const editedValue = 100;
const defaultValue = 4;
return (
    isOpen ? (
        <span>something</span>
    ) : (
        <>
            {(variableType ?? '').toUpperCase() === 'BOOLEAN'
                ? capitalize(editedValue ?? '')
                : (
                    <>
                        {editedValue !== defaultValue && <Icon />}
                        {editedValue}
                    </>
                )
            }
        </>
    )
);

修改说明：

• 给非BOOLEAN的分支返回了一个React Fragment（<></>），把图标、数值两个子节点包裹起来，满足JSX单根节点的要求
• 修复了所有语法闭合问题，删除了多余的大括号
• 逻辑完全匹配需求：非BOOLEAN类型时，editedValue和defaultValue不等就显示图标，否则仅显示数值

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