用reactjs渲染原始html [英] Rendering raw html with reactjs

问题描述

这是使用reactjs渲染原始html的唯一方法吗？

So is this the only way to render raw html with reactjs?

// 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（包含所有类，内联样式等）。像这样复杂的事情：

I know there are some cool ways to markup stuff with JSX, but I am mainly interested in being able to render raw html (with all the classes, inline styles, etc..). Something complicated like this:

<!-- 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中重写所有内容。

I would not want to have to rewrite all of that in JSX.

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

Maybe I am thinking about this all wrong. Please correct me.

推荐答案

你可以利用 html-to-react 参见 https://www.npmjs.com/package/html-to-react 的npm模块。

You could leverage the html-to-react npm module at https://www.npmjs.com/package/html-to-react.

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

Note: I'm the author of the module and just published it a few hours ago. Please feel free to report any bugs or usability issues.

这篇关于用reactjs渲染原始html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！