React


Adding Markdown


コンポーネントの構造は


Markdown変換ライブラリを追加

<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js">
</script>

javascript

var Comment = React.createClass({
  render: function() {
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        // marked ライブラリを利用して this.props.children を変換する
        {marked(this.props.children.toString())}
      </div>
    );
  }
});

問題があります! 描画されたコメントは ブラウザでみると "<p>This is <em>another</em> comment</p>" のように表示されています。HTMLに描画するにはタグが必要です。

これは React が XSS攻撃から 守っているからです。 上記の方法ではなくべつの方法を使います


var Comment = React.createClass({
  render: function() {
    var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        <span dangerouslySetInnerHTML={ {__html: rawMarkup} } />
      </div>
    );
  }
});

This is a special API that intentionally makes it difficult to insert raw HTML, but for marked we'll take advantage of this backdoor.

Remember: by using this feature you're relying on marked to be secure. In this case, we pass sanitize: true which tells marked to escape any HTML markup in the source instead of passing it through unchanged.