在React组件动态设置文本时如何将内嵌HTML标签转为真实DOM元素

原因说明 #

React 默认会对所有插入到 JSX 中的字符串内容做 HTML 转义处理，目的是避免 XSS 注入攻击，所以你直接渲染包含 <a> 标签的字符串时，标签会被当成纯文本展示，不会被解析为真实的 DOM 元素。

解决方案 #

下面是三种常用的处理方案，可根据你的场景选择：

方案1：使用 React 原生的 dangerouslySetInnerHTML #

这是最直接的方案，适合要渲染的HTML字符串来源完全可信的场景：

const text = "This is a piece of text with a <a href='替换为实际跳转地址'>link</a>";
// 注意要给a标签补充href属性，否则点击不会跳转
const Comp = () => {
  return <div dangerouslySetInnerHTML={{__html: text}} />;
};

注意：如果你的text内容来自用户输入、或者其他不可信的第三方来源，不要直接使用这个方案，有被注入恶意脚本的风险。

方案2：手动解析字符串生成React元素 #

如果只需要处理少量固定格式的标签，推荐用这种更安全的方式：

const text = "This is a piece of text with a <a>link</a>";
// 匹配<a>标签内容的正则
const linkReg = /<a>(.*?)<\/a>/g;

const Comp = () => {
  const contentParts = text.split(linkReg);
  return <div>
    {contentParts.map((part, idx) => {
      // 奇数序号的是匹配到的a标签内的文本
      if(idx % 2 === 1) {
        return <a key={idx} href="替换为实际跳转地址">{part}</a>
      }
      return part
    })}
  </div>
};

这种方式完全可控，不会存在XSS风险。

方案3：使用第三方HTML解析库 #

如果需要解析的标签类型多、逻辑复杂，可以用成熟的第三方库比如 html-react-parser，库本身已经做了XSS防护处理：

import parse from 'html-react-parser';

const text = "This is a piece of text with a <a href='替换为实际跳转地址'>link</a>";

const Comp = () => {
  return <div>{parse(text)}</div>;
};

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