使用reactjs渲染原始HTML

那么这是用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中重写所有内容。

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

猪猪小卤蛋2020/03/11 14:57:39
export class ModalBody extends Component{
    rawMarkup(){
        var rawMarkup = this.props.content
        return { __html: rawMarkup };
    }
    render(){
        return(
                <div className="modal-body">
                     <span dangerouslySetInnerHTML={this.rawMarkup()} />

                </div>
            )
    }
}
米亚神无2020/03/11 14:57:39

dangerouslySetInnerHTML除非绝对必要,否则请勿使用。根据文档,“这主要是用于与DOM字符串操作库进行协作”使用它时,您将放弃React的DOM管理的好处。

就您而言,转换为有效的JSX语法非常简单;只需将class属性更改为即可className或者,如上面的评论所述,您可以使用ReactBootstrap库,库将Bootstrap元素封装到React组件中。

古一蛋蛋凯2020/03/11 14:57:39

您可以利用html-to-reactnpm模块。

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