tutorial.js 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. let data = [
  2. { id: 1, author: "Pete Hunt", text: "This is one comment" },
  3. { id: 2, author: "Jordan Walke", text: "This is *another* comment" }
  4. ];
  5. let Comment = React.createClass({
  6. rawMarkup: function () {
  7. let rawMarkup = marked(this.props.children.toString(), { sanitize: true });
  8. return { __html: rawMarkup };
  9. },
  10. render: function () {
  11. return (
  12. <div className="comment">
  13. <h2 className="commentAuthor">
  14. {this.props.author}
  15. </h2>
  16. <span dangerouslySetInnerHTML={this.rawMarkup()} />
  17. </div>
  18. );
  19. }
  20. });
  21. let CommentList = React.createClass({
  22. render: function () {
  23. return (
  24. <div className="commentList">
  25. <Comment author="Pete Hunt">This is one comment</Comment>
  26. <Comment author="Jordan Walke">This is *another* comment</Comment>
  27. </div>
  28. );
  29. }
  30. });
  31. let CommentForm = React.createClass({
  32. render: function () {
  33. return (
  34. <div className="commentForm">
  35. Hello, world! I am a CommentForm.
  36. </div>
  37. );
  38. }
  39. });
  40. let CommentBox = React.createClass({
  41. render: function () {
  42. return (
  43. <div className="commentBox">
  44. <h1>Comments</h1>
  45. <CommentList data={this.props.data} />
  46. <CommentForm />
  47. </div>
  48. );
  49. }
  50. });
  51. ReactDOM.render(
  52. <CommentBox data={data} />,
  53. document.getElementById("content")
  54. );