React 官网 comment

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>React Tutorial</title>
    <script src="https://npmcdn.com/react@15.3.1/dist/react.js"></script>
    <script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.js"></script>
    <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
    <script src="https://npmcdn.com/jquery@3.1.0/dist/jquery.min.js"></script>
    <script src="https://npmcdn.com/remarkable@1.6.2/dist/remarkable.min.js"></script>
  </head>
  <body>
    <div id="content"></div>

    <script type="text/babel">
    var CommentBox = React.createClass({
      render: function() {
        return (
          <div className="commentBox">
            <h1>Comment</h1>
            <CommentList></CommentList>
            <CommentForm></CommentForm>
          </div>
        );
      }
    });


    var CommentList = React.createClass({
      render: function(){
        return (
          <div className="commentList">
             <Comment author="Pete">this is one comment</Comment>
             <Comment author="Jordan">this is another</Comment>
          </div>
        )
      }
    });

    var CommentForm = React.createClass({
      render: function(){
        return (
          <div className="commentForm">
            CommentForm
          </div>
        )
      }
    });


    var Comment = React.createClass({
      rawMarkup: function(text) {
        var md = new Remarkable();
        var rawMarkup = md.render(text);
        return { __html: rawMarkup };
      },

      render: function() {
        return (
          <div className="comment">
            <h2 className="commentAuthor">
              {this.props.author}
            </h2>
            <div dangerouslySetInnerHTML={this.rawMarkup(this.props.children.toString())} />
          </div>
        );
      }
    });


    ReactDOM.render(
      <CommentBox />,
      document.getElementById('content')
    );

    </script>
  </body>
</html>
React 官网 comment

推荐阅读更多精彩内容
