React中如何在三元运算符内正确嵌套渲染HTML元素？

问题原因 #

你当前的写法错误是直接将JSX元素和模板字符串混用拼接，这种写法下<b>标签会被当作普通字符串输出，无法被正常解析渲染为HTML粗体元素。

解决方法 #

不需要把整段文本都放在三元判断中，仅抽取出需要做条件处理的「interval单复数转换」逻辑部分使用三元运算符即可，外层span、公共文本、<b>标签都只需要写一次，不会出现重复代码：

<span>
  Do you want to reset the current schedule to be every {triggerScheduleValue.n_intervals} {
    triggerScheduleValue.n_intervals === 1 
      ? triggerScheduleValue.interval.slice(0, triggerScheduleValue.interval.length - 1)
      : triggerScheduleValue.interval
  } from <b>{currentTime}</b>
</span>

如果你确实需要对整段内容做分支判断（比如两个分支的文本差异很大的场景），只需要把每个分支的内容当作JSX节点书写，不要用模板字符串包裹文本和JSX元素的混合内容即可，示例如下：

<span>
  {triggerScheduleValue.n_intervals === 1 ? (
    <>
      Do you want to reset the current schedule to be every {triggerScheduleValue.n_intervals} {triggerScheduleValue.interval.slice(0, triggerScheduleValue.interval.length - 1)} from <b>{currentTime}</b>
    </>
  ) : (
    <>
      Do you want to reset the current schedule to be every {triggerScheduleValue.n_intervals} {triggerScheduleValue.interval} from <b>{currentTime}</b>
    </>
  )}
</span>

内容的提问来源于stack exchange，提问作者fra.mstr