React开发中如何在数组存储的文本内嵌入span标签实现局部加粗？

问题根因 #

渲染异常的本质是踩中了React的渲染规则红线：所有传入渲染逻辑的纯字符串，都会被React做安全转义，直接拼进字符串里的<span>标签不会被当成DOM节点解析，只会被当成本身的文字内容展示。

落地解决方法 #

1. 数组直接存储React合法节点（最推荐，无额外风险） #

不要拼接字符串形式的标签，直接把写好JSX结构的内容存在数组里，遍历渲染时会被React正常解析：

// 错误写法（字符串拼接标签，会被转义）
const contentList = [
  "普通文本 <span style={{fontWeight: 700}}>需要加粗的片段</span> 后续普通文本"
]

// 正确写法（直接存JSX节点，正常渲染）
const contentList = [
  <>普通文本 <span style={{fontWeight: 700}}>需要加粗的片段</span> 后续普通文本</>
]

渲染时直接对数组做map遍历输出即可，不需要额外处理，加粗样式会正常生效。

2. 结构化拆分文本片段（适配接口返回的动态内容） #

如果文本内容来自后端接口，没办法直接手写JSX存入数组，可以把文本按照加粗规则拆成带标记的结构化片段，渲染时根据标记动态生成对应样式：

// 结构化存储示例：每个片段标记是否需要加粗
const contentList = [
  { text: "普通文本", isBold: false },
  { text: "需要加粗的片段", isBold: true },
  { text: "后续普通文本", isBold: false }
]

// 渲染逻辑
<div>
  {contentList.map((item, idx) => (
    <span 
      key={idx} 
      style={{ fontWeight: item.isBold ? 700 : 400 }}
    >
      {item.text}
    </span>
  ))}
</div>

这种方式灵活性更高，也完全规避了XSS注入风险，适合内容动态生成的场景。

3. 受控场景下使用dangerouslySetInnerHTML（非必要不使用） #

如果确实需要把带标签的字符串直接解析为DOM，可以使用React提供的dangerouslySetInnerHTMLAPI直接渲染HTML字符串。
该方案存在明确的XSS注入风险，仅在你能100%确认字符串内容无恶意代码、完全不包含用户提交内容的场景下使用，否则极易被攻击者注入恶意脚本窃取用户数据

// 渲染写法
<div
  dangerouslySetInnerHTML={{
    __html: "普通文本 <span style='font-weight: 700'>需要加粗的片段</span> 后续普通文本"
  }}
/>

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