1 /* 2 3 4 这个程序的流程是 , 首先执行 构造函数 (), 然后 就去执行那个 render 渲染 , 在 render 哪里 的if else 转向应该执行的渲染方法 , 例如 commitsrender 5 然后当 标签对应的渲染方法执行完毕之后 就over了 . 6 */ 7 8 9 import React from ‘react‘; 10 import ajax from ‘superagent‘; 11 12 class Detail extends React.Component { // 声明一个 Detail 类 通过关键字 extend 继承自 React.Component 13 constructor(props) { // construtor 是 构造函数的意思 在任何语言之内 当你用这个类 实例化一个对象之后 , 就会自动执行 构造函数(优先级很高) 。 14 super(props); // 通过 super 关键字 将 props 这个属性给 该类 的父亲 React.Component 15 16 this.state = { // 给 this 所指向的对象 , 绑定方法 . 17 mode: ‘commits‘, // mode 是指定默认的 模式 , 也就是当你打开网页的时候 你首先看到的是 commits 中的内容 . 18 commits: [], // 现在 声明 this的属性 (state) , (其实 : 后面的内容随意 , 但是为了容易理解下文 所以这里就是 [] 表明这是一个数组 ) 19 forks: [], 20 pulls: [] 21 }; 22 } 23 componentWillMount() { 24 ajax.get(‘http://192.168.1.100:3000/test1‘) // 通过这个方法 来获取 地址中的内容 . 25 .end((error, response) => { // error 来 储存上面的获取内容是否成功 , response 来储存 获取的内容 . 26 if (!error && response) { // 如果 没有发生错误 , 并且有内容的话 27 this.setState({ commits: response.body }); // 这里是将 , 上文中的 response.body 的内容 绑定到 , this 下面的conmits 属性 . 28 } else { 29 console.log(‘Error fetching commits‘, error); // 如果 获取内容出问题的话 就 在web控制台 输出 这里的内容 . 30 } 31 } 32 ); 33 ajax.get(‘http://192.168.1.100:3000/test2‘) // 同上 34 .end((error, response) => { 35 if (!error && response) { 36 this.setState({ forks: response.body }); 37 } else { 38 console.log(‘Error fetching forks‘, error); 39 } 40 } 41 ); 42 ajax.get(‘http://192.168.1.100:3000/test3‘) // 同上 43 .end((error, response) => { 44 if (!error && response) { 45 this.setState({ pulls: response.body }); 46 } else { 47 console.log(‘Error fetching pulls‘, error); 48 } 49 } 50 ); 51 } 52 showCommits() { // 这个方法的意思是 展现出来commits的内容 . 53 this.setState({ mode: ‘commits‘ }); // 在这里 我们昨天说过 可以通过 setstate 这个方法 来监测当 内容改变的时候 会自动刷新页面 . 54 } 55 showForks() { 56 this.setState({ mode: ‘forks‘ }); // 同上 57 } 58 showPulls() { 59 this.setState({ mode: ‘pulls‘ }); 60 } 61 renderCommits() { // 这里是 渲染 commits的内容 . 62 return this.state.commits.map((commit, index) => { // 在上面 (15-24) commits , 可以看到commits的储存的 第一个网页中的内容 . index的数值 是从 0 开始 最大值根据 commits的大小来确定 . // 在括号里面 commit 储存 commits的内容 相当于 commit=this.state.commits 63 const author = commit.author ? commit.author : ‘xpower‘; // 因为 网页中的是 author 所以当 commit 代表 就等于了 网页的内容 . 可以通过 . 的方法来调用其中和属性 64 return (<p key={index}> // 这里是 因为采用了匿名函数 , react 不能识别出来 , 网页标签的代号 . 所以在这里需要手动设置 . 65 <strong>{author}</strong>: 66 <a href={commit.url}>{commit.url}</a>.// 第一个 commit.url 是实质上点击之后 导向的地址 . 第二个 commit.url是网页上面显示的地址 . 67 </p>); 68 }); 69 } 70 renderForks() { 71 return this.state.forks.map((fork, index) => { 72 const owner = fork.owner ? fork.owner : ‘Anonymous‘; 73 74 return (<p key={index}> 75 <strong>{owner}</strong>: forked to 76 <a href={fork.url}>{fork.url}</a> at {fork.created_at}. 77 </p>); 78 }); 79 } 80 renderPulls() { 81 return this.state.pulls.map((pull, index) => { 82 const user = pull.user ? pull.user : ‘Anonymous‘; 83 return (<p key={index}> 84 <strong>{user}</strong>: 85 <a href={pull.url}>{pull.url}</a>. 86 </p>); 87 }); 88 } 89 render() { 90 let content; 91 if (this.state.mode === ‘commits‘) { //这几个 if else 适用于检查现在 . 是执行的的哪一个标签 . 92 content = this.renderCommits(); // 然后开始调用 , 相应标签对应的函数 . 93 } else if (this.state.mode === ‘forks‘) { 94 content = this.renderForks(); 95 } else { 96 content = this.renderPulls(); 97 } 98 return (<div> 99 <button onClick={this.showCommits.bind(this)}>Show Commits</button> 100 <button onClick={this.showForks.bind(this)}>Show Forks</button> 101 <button onClick={this.showPulls.bind(this)}>Show Pulls</button> 102 {content} 103 </div>); 104 } 105 } 106 export default Detail;
时间: 2024-10-17 12:36:49