使用 reactjs 渲染原始 html

2022-08-30 00:41:41

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

也许我的想法都是错误的。请纠正我。


答案 1

现在有更安全的方法来呈现 HTML。我在这里之前的答案中涵盖了这一。您有4个选项,最后的用途。dangerouslySetInnerHTML

用于呈现 HTML 的方法

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

    <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. 最后的手段 - 使用 插入原始 HTML。dangerouslySetInnerHTML

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


答案 2

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

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