React中后端返回HTML内容被识别为文本的原因及解决方法

嘿，我来帮你搞定这个问题！

为什么浏览器把HTML当成文本显示？ #

React为了防止XSS跨站脚本攻击，默认会自动转义所有字符串内容。也就是说，当你直接渲染art.description里的HTML代码时，React会把<、>这些HTML标签转换成对应的实体字符（比如<变成<），这样浏览器就会把这些内容当成纯文本解析，而不是HTML元素。

怎么让浏览器正确解析HTML？ #

React提供了一个专门的属性——dangerouslySetInnerHTML，用来插入原始的HTML内容。虽然名字里带“dangerously”，但只要你确保后端返回的HTML是可信的、经过安全过滤的（比如没有恶意脚本），就可以放心使用。

给你修改一下你的React代码示例：

interface Article {
  id: number;
  title: string;
  description: string;
}

interface BodyComponentProps { name: string; article: Article; }

class BodyComponent extends React.Component<BodyComponentProps> {
  public render() {
    const art = this.props.article;
    return (
      <div className="article-container">
        <h2>{art.title}</h2>
        {/* 使用dangerouslySetInnerHTML渲染HTML内容 */}
        <div dangerouslySetInnerHTML={{ __html: art.description }} />
      </div>
    );
  }
}

注意事项 #

• 一定要确认description里的HTML来源是安全的，比如是你自己后端生成的、没有用户提交的恶意代码，否则可能会引入XSS漏洞。
• dangerouslySetInnerHTML需要接收一个对象，其中__html是固定的键名（双下划线开头），对应的值就是你要渲染的HTML字符串。

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