初试MVVM框架之React入门【南大软院大神养成计划】

前端之家收集整理的这篇文章主要介绍了初试MVVM框架之React入门【南大软院大神养成计划】前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
  1. var data = [
  2. {author: "Pete Hunt",text: "This is one comment"},{author: "Jordan Walke",text: "This is *another* comment"}
  3. ];
  4. //读取父组件的数据
  5. //在这儿this.props.author读取了传进来的author数据
  6. //而“This this one comment”等数据则被this.props.children读取了
  7. //另外使用的时候,要渲染的一定要放在ReactDOM.render之前。
  8. //上下尊卑有序。
  9. var Comment = React.createClass({
  10. render: function () {
  11. return (
  12. <div className="comment">
  13. <h2 className="commentAuthor">
  14. {this.props.author}
  15. </h2>
  16. {this.props.children}
  17. <hr/>
  18. </div>
  19. )
  20. }
  21. });
  22. //CommentBox
  23. //data={this.props.data},这句话的意思是
  24. var CommentBox = React.createClass({
  25. render: function () {
  26. return (
  27. <div className="commentBox">
  28. <h1>Comments</h1>
  29. <CommentList data={this.props.data}/>
  30. <CommentForm/>
  31. </div>
  32. );
  33. }
  34. });
  35. //CommentList
  36. //这里map的意思是一个遍历函数
  37. //把json数据传进去,并且命名为comment
  38. //然后return,Comment author = {comment.author},{comment.text}
  39. //然后commentNodes是一个数组,React会对其自动解包
  40. //
  41. var CommentList = React.createClass({
  42. render:function() {
  43. var commentNodes = this.props.data.map(function (comment) {
  44. return (
  45. <Comment author = {comment.author}>
  46. {comment.text}
  47. </Comment>
  48. )
  49. })
  50. return (
  51. <div className="commentList">
  52. {commentNodes}
  53. </div>
  54. )
  55. }
  56. });
  57. //CommentForm
  58. var CommentForm = React.createClass({
  59. render: function () {
  60. return (
  61. <div className="commentForm">
  62. Hello I'm a commentForm. </div> ) } }); //React的render ReactDOM.render( <CommentBox data={data}/>,document.getElementById('content') );

猜你在找的React相关文章