那么这是用 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-reactnpm 模块。
html-to-react
注意:我是该模块的作者,几个小时前刚刚发布了它。请随时报告任何错误或可用性问题。