1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677 |
- let Comment = React.createClass({
- rawMarkup: function () {
- let rawMarkup = marked(this.props.children.toString(), { sanitize: true });
- return { __html: rawMarkup };
- },
- render: function () {
- return (
- <div className="comment">
- <h2 className="commentAuthor">
- {this.props.author}
- </h2>
- <span dangerouslySetInnerHTML={this.rawMarkup()} />
- </div>
- );
- }
- });
- let CommentList = React.createClass({
- render: function () {
- let commentNodes = this.props.data.map(function (comment) {
- return (
- <Comment author={comment.author} key={comment.id}>
- {comment.text}
- </Comment>
- );
- });
- return (
- <div className="commentList">
- {commentNodes}
- </div>
- );
- }
- });
- let CommentForm = React.createClass({
- render: function () {
- return (
- <div className="commentForm">
- Hello, world! I am a CommentForm.
- </div>
- );
- }
- });
- let CommentBox = React.createClass({
- getInitialState: function () {
- return { data: [] };
- },
- componentDidMount: function () {
- $.ajax({
- url: this.props.url,
- dataType: "json",
- cache: false,
- success: function (result) {
- console.log('Received frop api: ', result);
- this.setState({ data: result });
- }.bind(this),
- error: function (xhr, status, err) {
- console.error(this.props.url, status, err.toString());
- }.bind(this)
- });
- },
- render: function () {
- return (
- <div className="commentBox">
- <h1>Comments</h1>
- <CommentList data={this.state.data} />
- <CommentForm />
- </div>
- );
- }
- });
- ReactDOM.render(
- <CommentBox url="/api/comments" />,
- document.getElementById("content")
- );
|