我跟随comments React tutorial使用带有react-rails gem的Rails。考虑Comment
组件:
var Comment = React.createClass({
render: function() {
return (
<div className="comment">
<span className="commentAuthor">
<strong>{this.props.author}</strong>
</span>
<br/>
{marked(this.props.children.toString())}
</div>
);
}
});
使用方法如下:
<Comment author="Jordan Walke">This is *another* comment</Comment>
降价正确转换,但元素显示为非html安全:
<p>This is <em>another</em> comment</p>
使用
在Rails中呈现组件<%= react_component('CommentList', {prerender: true}) %>
我也尝试过:
<%= react_component('CommentList') %>
<%= react_component('CommentList', {prerender: true}).html_safe %>
这里是CommentList
的代码:
var CommentList = React.createClass({
render: function() {
return (
<div className="commentList">
<Comment author="Pete Hunt">This is one comment</Comment>
<Comment author="Jordan Walke">This is *another* comment</Comment>
</div>
);
}
});
所以我的问题是:如何以HTML安全的方式呈现降价转换的评论?
修改
很抱歉,答案就在教程中:
var Comment = React.createClass({
render: function() {
var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
return (
<div className="comment">
<span className="commentAuthor">
<strong>{this.props.author}</strong>
</span>
<br/>
<span dangerouslySetInnerHTML={{__html: rawMarkup}} />
</div>
);
}
});