使用 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 中重写所有这些。

也许我在想这一切都是错的。请纠正我。

原文由 vinhboy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以利用 html-to-react npm 模块。

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

原文由 Mike Nikles 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

现在有更安全的方法来呈现 HTML。我在之前的回答中对此进行 了 介绍。您有 4 个选项，最后一个选项使用 dangerouslySetInnerHTML 。

呈现 HTML 的方法

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

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

1. 更安全——在 Javascript 字符串中使用实体的 Unicode 编号。

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

要么

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

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

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

1. 不得已 - 使用 dangerouslySetInnerHTML 插入 原始 HTML。

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

原文由 Brett DeWoody 发布，翻译遵循 CC BY-SA 3.0 许可协议