官场小说排行榜,我欲封天耳根小说,有声读物

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

ReactJS組件之間如何進(jìn)行通信

最近在學(xué)習(xí)react.js，不得不說(shuō)***次接觸組件化開發(fā)很神奇，當(dāng)然也很不習(xí)慣。

成都創(chuàng)新互聯(lián)是一家專注于網(wǎng)站設(shè)計(jì)制作、成都做網(wǎng)站與策劃設(shè)計(jì),連云港網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十多年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:連云港等地區(qū)。連云港做網(wǎng)站價(jià)格咨詢:13518219792

react的思想還是蠻獨(dú)特的，當(dāng)然圍繞react的一系列自動(dòng)化工具也是讓我感覺亞歷山大

今天總結(jié)一下react組件之間的通信，權(quán)當(dāng)是自己的學(xué)習(xí)筆記：

reactJs中數(shù)據(jù)流向的的特點(diǎn)是：?jiǎn)雾?xiàng)數(shù)據(jù)流

react組件之間的組合不知道為什么給我一種數(shù)據(jù)結(jié)構(gòu)當(dāng)中樹的感覺，數(shù)據(jù)就是從根節(jié)點(diǎn)(頂端或其他子樹的頂端)“流”下來(lái)，大概就是這個(gè)樣子：

比如這是一個(gè)組件樹，數(shù)據(jù)就可以從main組件流到j(luò)umbotron組件、queationList組件、form組件，類似的queation組件的數(shù)據(jù)也可以流到下邊的question組件里邊。

但是很遺憾，這個(gè)從上到下的數(shù)據(jù)流動(dòng)，只能解決很少的問(wèn)題，還有一部分的數(shù)據(jù)流動(dòng)就是類似從jumbotron組件到form組件的這樣的兄弟組件的流動(dòng)形式，或者隔著幾個(gè)層級(jí)的數(shù)據(jù)流動(dòng)，再或者子組件發(fā)生了數(shù)據(jù)的變化，想通知父組件，數(shù)據(jù)流向從子組件到父組件流，這些問(wèn)題才是大多數(shù)的開發(fā)者需要面臨的問(wèn)題。所以這篇筆記總結(jié)下基礎(chǔ)的組件通信：

數(shù)據(jù)從父組件到子組件

最簡(jiǎn)單的通信就是父子間的通信，比如上邊圖上的有個(gè)jsonObj從main流進(jìn)了QueationList參考代碼：

 
 
  
  //這里模擬出幾條數(shù)據(jù) 
  
  var jsonObj=[ 
  
      {name:"A",question:"從小被人打怎么辦？",TextArea:"習(xí)慣就好了",applaud:35,disagree:1}, 
  
      {name:"B",question:"長(zhǎng)的太帥被人砍怎么辦？",TextArea:"食屎啦你",applaud:35,disagree:10}, 
  
      {name:"C",question:"因?yàn)樘直蝗嗣趺崔k？",TextArea:"享受就好了",applaud:35,disagree:45}, 
  
      {name:"D",question:"被老師打不開心",TextArea:"用錢打臉",applaud:35,disagree:6}, 
  
      {name:"E",question:"不愛洗澡怎么辦？",TextArea:"打一頓就好了",applaud:35,disagree:9} 
  
  ] 
  
   
  
  var QuestionList=React.createClass({ 
  
      prepareToRender:function(list){ 
  
          var array=[]; 
  
          for(var i=0;i
  
  
            array.push(); 
  
          } 
  
          return array; 
  
      }, 
  
      render:function(){ 
  
          var array=this.prepareToRender(this.props.jsonObj); 
  
          return {array}
; 
  
      } 
  
  }); 
  
  var Main = React.createClass({ 
  
      //開始渲染 
  
      render: function () { 
  
          return (

);

}

});

ReactDOM.render(

document.getElementById('container')

);

代碼寫的不怎么規(guī)范，但是數(shù)據(jù)的傳遞就是這樣的：

這樣就可以把父組件的數(shù)據(jù)帶到子組件里邊

數(shù)據(jù)從子組件到父組件

理論上來(lái)說(shuō)數(shù)據(jù)只能是單向的，所以不借助插件數(shù)據(jù)還真不好從子組件到父組件，一種很簡(jiǎn)單的手段是回調(diào)函數(shù)：

在父組件當(dāng)中寫個(gè)回調(diào)函數(shù)，然后傳遞到子組件，什么時(shí)候子組件數(shù)據(jù)變化了，直接調(diào)這個(gè)回調(diào)函數(shù)就可以了。

比如現(xiàn)在的jumbotron的按鈕被點(diǎn)擊了，我們想把被點(diǎn)擊這個(gè)事件發(fā)給它的父組件也就是main組件，那么我們可以這個(gè)做：

 
 
  
  var Jumbotron = React.createClass({ 
  
      handleClick: function () { 
  
          this.props.openTheWindow(false); 
  
      }, 
  
      render: function () { 
  
          return ( 
  
                   
  
                       
  
                          開始體驗(yàn)

);

}

});

var Main = React.createClass({

getInitialState: function () {

return {

openTheWindow: true

};

//開始給子組件一個(gè)回調(diào)函數(shù)，用來(lái)做子組件給父組件通信使用

buttonResponse:function(windowSatus){

this.setState({openTheWindow : windowSatus});

//開始渲染

render: function () {

console.log(jsonObj)

return (

);

}

});

ReactDOM.render(

document.getElementById('container')

);

子組件通知父組件狀態(tài)變化就是這樣，就好像是兒子找爸爸要零花錢，零花錢以及給不給都是爸爸說(shuō)了算的。

兄弟組件之間的通信

這個(gè)其實(shí)應(yīng)該是一個(gè)動(dòng)態(tài)應(yīng)用中最常見的通信，比如jubotron組件的點(diǎn)擊按鈕，form組件的表單出現(xiàn)：

這就是一個(gè)典型的兄弟之間的通信：

兄弟節(jié)點(diǎn)其實(shí)可以就是子父通信&&父子通信的疊加

首先按鈕被點(diǎn)擊，子組件通知負(fù)組件這個(gè)事件，然后父組件把這個(gè)消息帶給另一個(gè)子組件

下邊是個(gè)點(diǎn)擊按鈕顯示表單的例子：

 
 
  
  /** 
  
   * Created by niuGuangzhe on 2016/9/10. 
  
   */ 
  
  var Jumbotron = React.createClass({ 
  
      handleClick: function () { 
  
          this.props.openTheWindow(false); 
  
      }, 
  
      render: function () { 
  
          return ( 
  
               
  
                   
  
                       
  
                          開始體驗(yàn)

新聞中心

{this.props.obj.question}

其他資訊