Rails中的React + Marked.js

时间:2015-07-13 17:48:25

标签: ruby-on-rails reactjs

我跟随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>
    );
  }
});

0 个答案:

没有答案