JS - To my gril

標籤：

  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 所指向的對象 , Binder 方法 .  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;

 

JS - To my gril