React中拼接含HTML标签的字符串未渲染为元素问题排查

问题根源 #

React出于安全考量（防范XSS攻击），会自动转义所有插入到JSX中的字符串内容。你拼接的带<strong>标签的字符串，会被React当作纯文本处理，不会被解析成对应的HTML元素，最终就出现了标签被原样显示的情况。

解决方式 #

有两种靠谱的处理方案：

1. 用JSX直接组合元素（推荐，更安全规范） #

别用字符串拼接HTML标签，直接用JSX语法组合元素：

const fruitResult = 'There is no Colors for ';
const fruitResult1 = ' in the database.';
const fruitResult2 = 'No Data available.';

<div>
  <h2>
    {fruitSearch === '' 
      ? fruitResult2 
      : (
        <>
          {fruitResult}
          <strong>{fruitSearch}</strong>
          {fruitResult1}
        </>
      )
    }
  </h2>
</div>

这种方式完全符合React的开发逻辑，既安全又能正确渲染加粗效果。

2. 使用dangerouslySetInnerHTML（仅信任内容时用） #

如果必须用字符串拼接的HTML内容，可以通过dangerouslySetInnerHTML让React解析HTML，但要注意：只有当你100%确定内容来源安全，不会被注入恶意代码时再用，否则会有XSS风险。

const fruitResult = 'There is no Colors for ';
const searchItem = `<strong>${fruitSearch}</strong>`;
const fruitResult1 = ' in the database.';
const fruitResult2 = 'No Data available.';

<div>
  <h2>
    {fruitSearch === '' 
      ? fruitResult2 
      : (
        <span dangerouslySetInnerHTML={{ __html: `${fruitResult} ${searchItem} ${fruitResult1}` }} />
      )
    }
  </h2>
</div>

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