这是用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=“插入符号”></span>;
</按钮>;
<;ul class=“dropdown menu”role=“menu”aria labelledby=“dropdown menu1”>;
<;li role=“演示文稿”>&书信电报;a role=“menuitem”tabindex=“-1”href=“”>;行动</a></李>;
<;li role=“演示文稿”>&书信电报;a role=“menuitem”tabindex=“-1”href=“”>;另一项行动</a></李>;
<;li role=“演示文稿”>&书信电报;a role=“menuitem”tabindex=“-1”href=“”>;这里还有别的东西</a></李>;
<;li role=“演示文稿”>&书信电报;a role=“menuitem”tabindex=“-1”href=“”>;分离链接</a></李>;
</ul>;
</部门>;
我不想在JSX中重写所有这些
也许我对这一切的想法都错了。请纠正我
现在有更安全的方法来呈现HTML。我在前面的回答中谈到了这一点。您有4个选项,最后一个选项使用了危险的HTML
呈现HTML的方法
-
最简单的-使用Unicode,将文件另存为UTF-8,并将
字符集设置为UTF-8<;部门>;{'First·Second'}</部门> -
更安全-对Javascript字符串中的实体使用Unicode编号
<;部门>;{'First\u00b7 Second'}</部门>或
<;部门>;{'First'+String.fromCharCode(183)+'Second'}</部门> -
或者使用字符串和JSX元素的混合数组
<;部门>;{['First',<;span>;<;middot;<;/span>;,'Second']}</部门> -
万不得已-使用
危险的setinerHTML插入原始HTML<;div dangerouslysetinerhtml={{{uuuhtml:'First&;middot;Second'}}/>