使用reactjs呈现原始html

Question

这是用reactjs呈现原始html的唯一方法吗？

// http://facebook.github.io/react/docs/tutorial.html
// tutorial7.js
var converter = new Showdown.converter();
var Comment = React.createClass({
  render: function() {
    var rawMarkup = converter.makeHtml(this.props.children.toString());
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        <span dangerouslySetInnerHTML={{__html: rawMarkup}} />
      </div>
    );
  }
});

我知道有一些很酷的方法用JSX标记东西，但我主要感兴趣的是能够渲染原始的html（所有的类，内联样式等）。像这样复杂的东西：

<!-- http://getbootstrap.com/components/#dropdowns-example -->
<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>

我不想在JSX中重写所有这些。

也许我对这一切的想法都错了。请纠正我。

Answer 1

危险的是，React取代了在浏览器DOM中使用innerHTML。一般来说，从代码中设置HTML是有风险的，因为很容易在不经意间让用户遭受跨站点脚本（XSS）攻击。

在通过危险的LysetinerHTML将原始HTML注入DOM之前，最好/更安全地对其进行消毒（例如使用DOMPurify）。

DOMPurify-一个仅DOM，超快速，超容忍的XSS消毒器，适用于超文本标记语言，MathML和SVG。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

Answer 2

您可以利用html来响应npm模块。

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

Answer 3

现在有更安全的方法来呈现HTML。我在前面的回答中谈到了这一点。您有4个选项，最后一个选项使用了危险的HTML。

超文本标记语言的渲染方法

>

<代码>

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

<代码>

或

<代码>

或者一个包含字符串和JSX元素的混合数组。

<代码>

最后一种方法-使用危险的HTML插入原始HTML。

<代码>