我有一个返回几行 html 的函数,如下所示:
render: function() {
var badges = user.get('achievements').badges.map(function(badge) {
var str = '<h3><span className="fa fa-fw '
switch(badge.id) {
case '0':
str += ('fa-briefcase"></span><small>' + badge.text + '</small></h3>')
break;
case '1':
str += ('fa-shopping-cart"></span><small>' + badge.text + '</small></h3>')
break;
...
}
return str;
});
return (
<div className="pull-right">
{badges}
</div>
);
}
执行此操作时,字符串将按原样呈现在页面上,作为文本:
<h3><span className="fa fa-fw fa-briefcase"></span><small>Visionary</small></h3><h3><span className="fa fa-fw fa-shopping-cart"></span><small>Active</small></h3><h3><span className="fa fa-fw fa-sitemap"></span><small>Lorem</small></h3><h3><span className="fa fa-fw fa-tasks"></span><small>Ipsum</small></h3><h3><span className="fa fa-fw fa-signal"></span><small>Dolor</small></h3><h3><span className="fa fa-fw fa-check-square"></span><small>Amet;</small></h3>
如何将其呈现为正确的 HTML?