React.js中HTML内容无法渲染，显示源码而非格式化文本求助

嘿，我完全懂你碰到的这个麻烦——React出于安全考量，默认会把所有插入到组件里的文本内容自动转义，所以你直接把HTTP响应里的HTML字符串放进<article>或者其他标签里时，它只会原封不动显示带标签的纯文本，不会解析成格式化的HTML结构。

问题根源 #

React的这个默认行为是为了防止XSS跨站脚本攻击：如果直接渲染不可信的HTML，攻击者可能注入恶意脚本，窃取用户数据或者破坏页面。所以React不会自动帮你解析HTML字符串，除非你明确告诉它你信任这段内容。

解决方案：使用dangerouslySetInnerHTML #

这是React专门提供的属性，用来绕过默认的转义机制，让React渲染原始HTML。你只需要修改你的<article>标签部分：

const Show = (props) => ( 
  <div className='content'> 
    <a href={props.job.url}>
      <span className='ListEntryTitle'>{props.job.title} </span>
    </a> 
    <p className='ListEntryCompany' style={{margin: "0 0 0 0"}}> 
      {props.job.company}
    </p> 
    <p className='ListEntryType'>{props.job.type}</p> 
    {/* 修改这里，使用dangerouslySetInnerHTML */}
    <article 
      className="box" 
      style={{width: "auto", height: "350px", overflow: "auto"}}
      dangerouslySetInnerHTML={{ __html: props.job.description }}
    ></article> 
    <button className="button" onClick={props.saveJob}>Save</button> 
    <button className="button" onClick={props.nextJob}>Next</button> 
    <div> 
      <button className="button" onClick={props.newSearch}>new Search</button> 
    </div> 
  </div> 
)

重要安全提醒 #

dangerouslySetInnerHTML的名字已经很直白了——只有当你完全信任要渲染的HTML内容时才使用它。如果props.job.description来自用户输入、第三方API或者其他不可信的数据源，一定要先对HTML进行安全清理，避免XSS攻击。

推荐使用DOMPurify库来清理HTML：

1. 先安装依赖：

npm install dompurify
# 或者
yarn add dompurify

2. 在组件中导入并使用：

import DOMPurify from 'dompurify';

const Show = (props) => {
  // 先清理HTML内容
  const cleanDescription = DOMPurify.sanitize(props.job.description);

  return (
    <div className='content'> 
      {/* 其他内容不变 */}
      <article 
        className="box" 
        style={{width: "auto", height: "350px", overflow: "auto"}}
        dangerouslySetInnerHTML={{ __html: cleanDescription }}
      ></article> 
      {/* 其他内容不变 */}
    </div> 
  )
}

为什么之前的标签没用？ #

你尝试的<div>、<textarea>、<article>这些标签，都遵循React的默认转义规则——不管你放什么文本内容，React都会把<、>这些特殊字符转义成<、>，所以最终显示的就是纯文本标签，而不是解析后的HTML。

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