现在有更安全的方法来呈现 HTML。我在以前的回答中介绍了这一点。您有 4 个选项，最后一个使用dangerouslySetInnerHTML.

呈现 HTML 的方法

1. 最简单- 使用 Unicode，将文件另存为 UTF-8 并将 设置charset为 UTF-8。

   <div>{'First · Second'}</div>

2. 更安全- 对 Javascript 字符串中的实体使用 Unicode 编号。

   <div>{'First \u00b7 Second'}</div>

   或者

   <div>{'First ' + String.fromCharCode(183) + ' Second'}</div>

3. 或者带有字符串和 JSX 元素的混合数组。

   <div>{['First ', <span>&middot;</span>, ' Second']}</div>

4. 最后的手段- 使用dangerouslySetInnerHTML.

   <div dangerouslySetInnerHTML={{__html: 'First &middot; Second'}} />

您可以利用html-to-reactnpm module。

注意：我是该module的作者，几个小时前刚刚发布。请随时报告任何错误或可用性问题。

risklySetInnerHTML是 React 在浏览器 DOM 中使用 innerHTML 的替代品。一般来说，从代码中设置 HTML 是有风险的，因为很容易在不经意间将用户暴露给跨站点脚本 (XSS) 攻击。

在通过dangerouslySetInnerHTML.

DOMPurify - 用于 HTML、MathML 和 SVG 的仅 DOM、超快速、超级容忍的 XSS 清理器。DOMPurify 使用安全的默认设置，但提供了许多可配置性和挂钩。

示例：

import React from 'react'
import createDOMPurify from 'dompurify'
import { JSDOM } from 'jsdom'

const window = (new JSDOM('')).window
const DOMPurify = createDOMPurify(window)

const rawHTML = `
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>
`

const YourComponent = () => (
  <div>
    { <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(rawHTML) }} /> }
  </div>
)

export default YourComponent

我在快速和肮脏的情况下使用过这个：

// react render method:

render() {
    return (
      <div>
        { this.props.textOrHtml.indexOf('</') !== -1
            ? (
                <div dangerouslySetInnerHTML={{__html: this.props.textOrHtml.replace(/(<? *script)/gi, 'illegalscript')}} >
                </div>
              )
            : this.props.textOrHtml
          }

      </div>
      )
  }

我试过这个纯组件：

const RawHTML = ({children, className = ""}) => 
<div className={className}
  dangerouslySetInnerHTML={{ __html: children.replace(/\n/g, '<br />')}} />

特征

• 需要classNameprops（更容易设计）
• 替换\n为<br />（你经常想这样做）
• 使用组件时将内容作为子项放置，例如：
• <RawHTML>{myHTML}</RawHTML>

我已将该组件放在 Github 的 Gist 中：RawHTML: ReactJS pure component to render HTML