React组件中三元表达式无法渲染图标，求助问题排查

你在三元表达式里用+拼接React元素（图标组件）和数组/字符串的写法完全错误。React元素本质是JavaScript对象，用+拼接时会被强制转换成[object Object]，最终渲染出的是类似[object Object]20的异常文本，而非预期的图标加数值。

你需要把图标和数值放在JSX结构内，而非用字符串拼接的方式。推荐两种写法：

写法1：使用JSX片段（无额外DOM元素） #

{(data.increase) ? <> <KeyboardArrowUpIcon /> 20 </> : <> <KeyboardArrowDownIcon /> -13 </>}

写法2：用容器元素包裹（方便后续加样式） #

{(data.increase) ? 
  <span className="percentage-content">
    <KeyboardArrowUpIcon /> 20
  </span> : 
  <span className="percentage-content">
    <KeyboardArrowDownIcon /> -13
  </span>
}

额外优化：让数据更动态 #

你可以把数值也整合到data对象里（新增changeValue字段），避免硬编码，让组件更灵活：

// 在switch分支里补充数据字段
case "Billing":
    data={
        title:"Billing",
        increase: false,
        amount: 4000,
        link:"View Billing",
        icon: <MonetizationOnOutlinedIcon className="icon"/>,
        changeValue: -13
    };
    break;

对应的三元表达式简化为：

<>
  {data.increase ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
  {data.changeValue}
</>

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