使用 reactjs 渲染原始 html [英] Rendering raw html with reactjs
问题描述
这是使用 reactjs 渲染原始 html 的唯一方法吗?
//http://facebook.github.io/react/docs/tutorial.html//教程7.jsvar 转换器 = 新 Showdown.converter();var Comment = React.createClass({渲染:函数(){var rawMarkup = converter.makeHtml(this.props.children.toString());返回 (<div className="评论"><h2 className="commentAuthor">{this.props.author}<span risklySetInnerHTML={{__html: rawMarkup}}/>
);}});
我知道有一些很酷的方法可以用 JSX 标记东西,但我主要对能够呈现原始 html(带有所有类、内联样式等)感兴趣.像这样复杂的东西:
<!-- http://getbootstrap.com/components/#dropdowns-example --><div class="下拉"><button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">落下<span class="caret"></span>按钮><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="#">另一个动作</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">这里还有别的东西</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">分隔链接</a></li>
我不想在 JSX 中重写所有这些.
也许我在想这一切都是错误的.请纠正我.
您可以利用 html-to-react
npm 模块.
注意:我是该模块的作者,几个小时前刚刚发布.请随时报告任何错误或可用性问题.
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>
);
}
});
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>
I would not want to have to rewrite all of that in JSX.
Maybe I am thinking about this all wrong. Please correct me.
You could leverage the html-to-react
npm module.
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屋!