如何在JSX三元运算符中仅将指定单个单词设置为粗体样式

实现方案 #

你只需要将三元运算符判断为真时返回的'Full'纯字符串，替换为单独设置加粗样式的JSX元素即可，不会影响其他文本的样式，也不需要修改外层span的原有配置。

修改后的完整代码如下：

<span
  style={{
    flexGrow: 1,
    color: "lightgrey",
    fontSize: "12px",
    marginLeft: "10px"
  }}
>
  {e.enrolledNum / e.total_spots >= 1
    ? <strong>Full</strong>
    : `${e.enrolledNum} enrolled ${""} / ${""} ${
        e.total_spots ? e.total_spots : "0"
      } spots`}
</span>

如果需要自定义加粗的粗细程度，也可以用span单独设置样式替换strong标签：

<span style={{fontWeight: 700}}>Full</span>

这种方案利用了JSX支持在插值中嵌套元素的特性，外层span可以同时兼容文本节点和子元素节点，子元素的样式完全独立，不会影响到同级的其他文本内容。

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