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

也许我想的全错了.请纠正我.

推荐答案

您可以利用html-to-react NPM模块.

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

Javascript相关问答推荐

有Angular 的material .未应用收件箱中的价值变化

有什么(最佳)方法可以从模块中获取脚本模块的多姆元素吗?

如何使用侧边滚动按钮具体滚动每4个格?

深嵌套的ng-container元素仍然可以在Angular 布局组件中正确渲染内容吗?

如何用显示网格平滑地将元素从一个地方移动到另一个地方?

Phaser 3 console. log()特定游戏角色的瓷砖属性

Msgraph用户邀请自定义邮箱模板

如何让npx在windows中运行js脚本?

查找最长的子序列-无法重置数组

ChartJs未呈现

单个HTML中的多个HTML文件

有效路径同时显示有效路径组件和不存在的路径组件

如果一个字符串前面有点、空格或无字符串,后面有空格、连字符或无字符串,则匹配正则表达式

使用Document.Evaluate() Select 一个包含撇号的HTML元素

删除元素属性或样式属性的首选方法

Node.js API-queryAll()中的MarkLogic数据移动

JavaScript -复制到剪贴板在Windows计算机上无效

TabNavigator和StackNavigator之间的Reaction Native中的导航问题

Django模板中未加载JavaScript函数

在点击链接后重定向至url之前暂停