React JSX条件渲染：前置条件为真时如何跳过后续折扣逻辑？

关于switch是否为最优方案 #

这个场景下switch不是最优处理方式。switch更适合针对单个变量的多个固定枚举值做分支判断，当前逻辑是针对ID、Money两个不同字段的布尔规则判断，强行用switch反而会写很多冗余的case条件，可读性和维护性都不好。

原有代码的语法问题 #

你写的代码报错核心原因是三元运算符结构写错了：三元运算符的固定语法是判断条件 ? 真值返回内容 : 假值返回内容，你的代码里错放了大括号、括号位置，还在JSX表达式内部多写了不必要的大括号包裹，另外原来的可运行代码里< /div>标签中间多了空格，也会导致JSX解析失败。

可用的实现方案 #

方案1：直接在JSX中用嵌套三元（适合逻辑简单的场景） #

直接按判断优先级写嵌套三元即可，ID以'BGM'开头时返回null就代表不渲染任何内容：

{ID.toString().startsWith('BGM') ? null : (
  Money.toString().endsWith('54') ? (
    <div className="tg">Take 5% off</div>
  ) : (
    <div className="tg">Take 15% off</div>
  )
)}

方案2：提前计算渲染内容（更推荐，可维护性更好） #

如果不想把逻辑全堆在return的JSX里，可以在return语句之前提前算好要渲染的折扣元素，后续加新规则改起来更方便：

// return 之前的逻辑区
const idStr = ID.toString()
const moneyStr = Money.toString()
let discountNode = null

if (!idStr.startsWith('BGM')) {
  discountNode = moneyStr.endsWith('54')
    ? <div className="tg">Take 5% off</div>
    : <div className="tg">Take 15% off</div>
}

// return 的JSX里直接引用变量即可
return (
  <div className="container">
    {/* 其他业务组件 */}
    {discountNode}
    {/* 其他业务组件 */}
  </div>
)

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