如何渲染API返回字符串中的HTML标签？

React出于安全考虑，会自动转义所有插入到JSX中的字符串内容，所以直接写 <p>{Data.title}</p> 时，<b> 这类标签会被当成普通文本显示，不会被解析成HTML。

要让字符串里的HTML标签正常渲染，你需要使用React提供的 dangerouslySetInnerHTML 属性，它允许你直接插入原始HTML内容：

修改后的核心写法 #

<p dangerouslySetInnerHTML={{ __html: Data.title }}></p>

完整组件示例 #

const Data = [
    {
      id: '1',
      title: 'Blablab<b>labl</b>abla',
    },
    {
      id: '2',
      title: '2Blablab<b>labl</b>abla',
    },
];

function YourComponent() {
  return (
    <div>
      {Data.map(item => (
        <p key={item.id} dangerouslySetInnerHTML={{ __html: item.title }}></p>
      ))}
    </div>
  );
}

这样渲染后，Blablab<b>labl</b>abla 就会变成 Blablablablabla 的粗体效果。

⚠️ 注意：dangerouslySetInnerHTML 带"dangerously"字样是有原因的——如果插入的HTML内容来自不可信来源（比如用户输入、未过滤的第三方API数据），可能会引入XSS攻击风险。如果数据不可信，建议先用HTML清理库对内容过滤后再渲染。

内容的提问来源于stack exchange，提问作者Said Al-Ghiyats