使用reactjs呈现原始html

这是用reactjs呈现原始html的唯一方法吗

//http://facebook.github.io/react/docs/tutorial.html
//教程7.js
var converter=new shodown.converter();
var Comment=React.createClass({
render:function(){
var rawMarkup=converter.makeHtml(this.props.children.toString());
返回(
<div className=“comment”>
<h2 className=“commentAuthor”>
{this.props.author}
</h2>
<span DANGERYSETINERHTML={{{uuuHTML:rawMarkup}}/>
</div>
);
}
});

我知道有一些很酷的方法可以用JSX标记东西,但我主要感兴趣的是能够呈现原始html(包括所有的类、内联样式等等)。像这样复杂的事情:

<!——http://getbootstrap.com/components/#dropdowns-示例-->
<div class=“下拉列表”>
<button class=“btn btn默认下拉切换”type=“button”id=“dropdownMenu1”数据切换=“dropdown”aria expanded=“true”>
下拉列表
<span class=“插入符号”&gt&lt/span>
&lt/按钮>
<ul class=“dropdown menu”role=“menu”aria labelledby=“dropdown menu1”>
<li role=“演示文稿”&gt&书信电报;a role=“menuitem”tabindex=“-1”href=“”>行动&lt/a&gt&lt/李>
<li role=“演示文稿”&gt&书信电报;a role=“menuitem”tabindex=“-1”href=“”>另一项行动&lt/a&gt&lt/李>
<li role=“演示文稿”&gt&书信电报;a role=“menuitem”tabindex=“-1”href=“”>这里还有别的东西&lt/a&gt&lt/李>
<li role=“演示文稿”&gt&书信电报;a role=“menuitem”tabindex=“-1”href=“”>分离链接&lt/a&gt&lt/李>
&lt/ul>
&lt/部门>

我不想在JSX中重写所有这些

也许我对这一切的想法都错了。请纠正我

现在有更安全的方法来呈现HTML。我在前面的回答中谈到了这一点。您有4个选项,最后一个选项使用了危险的HTML

呈现HTML的方法

  1. 最简单的-使用Unicode,将文件另存为UTF-8,并将字符集设置为UTF-8

    <部门>{'First·Second'}&lt/部门&gt

  2. 更安全-对Javascript字符串中的实体使用Unicode编号

    <部门>{'First\u00b7 Second'}&lt/部门&gt

    <部门>{'First'+String.fromCharCode(183)+'Second'}&lt/部门&gt

  3. 或者使用字符串和JSX元素的混合数组

    <部门>{['First',<span><middot;</span>,'Second']}&lt/部门&gt

  4. 万不得已-使用危险的setinerHTML插入原始HTML

    <div dangerouslysetinerhtml={{{uuuhtml:'First·Second'}}/&gt

发表评论