React组件渲染API返回HTML的最佳方式及dangerouslySetInnerHTML的合理性

最直接的方案：使用dangerouslySetInnerHTML #

针对你提供的这类包含简单<span>标签的HTML内容，dangerouslySetInnerHTML是完全合理的选择，这也是React官方指定的渲染原始HTML的方法。

代码示例 #

直接在组件里这么写就行：

function HtmlContent() {
  // 假设这是API返回的HTML内容
  const apiHtml = 'Wayland Parrott <span class="searchmatch">Flowers</span> Jr. (November 26, 1939 – October 11, 1988) was an American actor, comedian and puppeteer. <span class="searchmatch">Flowers</span> was best known for the comedy';
  
  return <div dangerouslySetInnerHTML={{ __html: apiHtml }} />;
}

为什么这个方案可行？ #

• 你的API返回内容结构简单，没有嵌入脚本或未知第三方代码，安全风险极低。
• React默认会自动转义所有HTML内容来防范XSS攻击，而dangerouslySetInnerHTML就是明确告诉React：你信任这段内容，需要直接渲染它的原始结构。

必须注意的点 #

• 一定要确保API返回的HTML来自可信来源，如果内容是用户输入或不可信第三方提供的，必须先通过DOMPurify这类库做XSS过滤，处理后再渲染。
• 别滥用这个属性，只要能用JSX语法构建的内容，就优先用JSX，只有确实需要渲染原始HTML时再用它。

内容的提问来源于stack exchange，提问作者Amin-da