完成评论列表硬编码数据

Author: glisteningly

public/scripts/tutorial.js

@@ -1,15 +1,27 @@
-class Comment extends React.Component{
+const data = [
+  {id: 1, author: "Pete Hunt", text: "This is one comment"},
+  {id: 2, author: "Jordan Walke", text: "This is *another* comment"}
+];
+
+class Comment extends React.Component {
   constructor(props) {
     super(props);
   }
 
+  rawMarkup() {
+    let md = new Remarkable();
+    let rawMarkup = md.render(this.props.children.toString());
+    return {__html: rawMarkup};
+  }
+
   render() {
+    // let md = new Remarkable();
     return (
       <div className="comment">
         <h2 className="commentAuthor">
           {this.props.author}
         </h2>
-        {this.props.children}
+        <span dangerouslySetInnerHTML={this.rawMarkup()}/>
       </div>
     );
   }
@@ -21,9 +33,18 @@ class CommentList extends React.Component {
   }
 
   render() {
+    let commentNodes = this.props.data.map(function (comment) {
+      return (
+        <Comment author={comment.author} key={comment.id}>
+          {comment.text}
+        </Comment>
+      )
+    });
+
+
     return (
       <div className="commentList">
-        Hello, world! I am a CommentList.
+        {commentNodes}
       </div>
     );
   }
@@ -52,16 +73,14 @@ class CommentBox extends React.Component {
     return (
       <div className="commentBox">
         <h1>Comments</h1>
-        <CommentList/>
+        <CommentList data={this.props.data}/>
         <CommentFrom/>
       </div>
     );
   }
 }
 
-
-
 ReactDOM.render(
-  <CommentBox />,
+  <CommentBox data={data}/>,
   document.getElementById('content')
 );