React中怎么實現(xiàn)父子組件傳遞，相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

10年積累的成都做網(wǎng)站、網(wǎng)站設計經(jīng)驗，可以快速應對客戶對網(wǎng)站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡服務。我雖然不認識你，你也不認識我。但先做網(wǎng)站設計后付款的網(wǎng)站建設流程，更有平利免費網(wǎng)站建設讓你可以放心的選擇與我們合作。

React的組件生命周期

react主要思想是構(gòu)建可復用組件來構(gòu)建用戶界面。在react里面一切皆組件。每個組件里面都是有自己的生命周期，這個生命周期規(guī)定了組件的狀態(tài)和方法，分別在哪個階段執(zhí)行。下面附上一張React的生命周期圖：

組件第一階段：初始化、渲染以及裝載完成；

組件第二階段：組件運行時候的狀態(tài) ①:狀態(tài)變化引發(fā)組件的更新和重新渲染到更新完成

　　　　 ②:父組件屬性變化引發(fā)組件的更新(是常見的組件之間傳遞數(shù)據(jù)和同步狀態(tài)的手段):比如父組件登錄了，子組件也需變成登錄狀態(tài)

組件第三階段：卸載組件

JSX 語法

const names = ['Alice', 'Emily', 'Kate'];

ReactDOM.render(
 

 {
  names.map((name) => {
   return 
Hello, {name}!
  })
 }
 
,
 document.getElementById('example')
);

JSX 的基本語法規(guī)則：遇到 HTML 標簽（以<開頭），就用 HTML 規(guī)則解析；遇到代碼塊（以{開頭），就用 JavaScript 規(guī)則解析。

所以給jsx添加注釋只要這樣子：

{/* 。。。 */}

父組件傳向子組件

子：
var HelloMessage = React.createClass({
 render: function() {
  return 
Hello {this.props.name}
;
 }
});
---------------------------------------
父：
ReactDOM.render(
 ,
 document.getElementById('example')
);

變量HelloMessage就是相當于一個子組件類。通過this.props.name獲取到了Muyy。

另外注意

1. 所有組件類都必須有自己的render方法，用于輸出組件。

2. 組件類的第一個字母必須大寫，否則會報錯，比如HelloMessage不能寫成helloMessage

3. 組件類只能包含一個頂層標簽

4. class屬性需要寫成className，for屬性需要寫成htmlFor，這是因為class和for是 JavaScript 的保留字

子組件傳向父(爺)組件

其實很簡單，概括起來就是：react中state改變了，組件才會update。父組件寫好state和處理該state的函數(shù)，同時將函數(shù)名通過props屬性值的形式傳入子，子調(diào)用父的函數(shù)，同時引起state變化。

例子1.這里如下圖，用戶郵箱為父，綠色框為子。 父組件為用戶輸入的郵箱設好state，即“{email: ''}”，同時寫好處理state的函數(shù)，即“handleEmail”，這兩個名稱隨意起；再將函數(shù)以props的形式傳到子組件，子組件只需在事件發(fā)生時，調(diào)用父組件傳過來的函數(shù)即可。

//子組件
var Child = React.createClass({
  render: function(){
    return (
      

        請輸入郵箱：
      
    )
  }
});
//父組件，此處通過event.target.value獲取子組件的值
var Parent = React.createClass({
  getInitialState: function(){
    return {
      email: ''
    }
  },
  handleEmail: function(event){
    this.setState({email: event.target.value});
  },
  render: function(){
    return (
      

        
用戶郵箱：{this.state.email}
        
      
    )
  }
});
React.render(
 ,
 document.getElementById('test')
);

例子2.有時候往往需要對數(shù)據(jù)做處理，再傳給父組件，比如過濾或者自動補全等等，下面的例子對用戶輸入的郵箱做簡單驗證，自動過濾非數(shù)字、字母和"@."以外的字符。

//子組件，handleVal函數(shù)處理用戶輸入的字符，再傳給父組件的handelEmail函數(shù)
var Child = React.createClass({
  handleVal: function() {
    var val = this.refs.emailDom.value;
    val = val.replace(/[^0-9|a-z|\@|\.]/ig,"");
    this.props.handleEmail(val);
  },
  render: function(){
    return (
      

        請輸入郵箱：
      
    )
  }
});
//父組件，通過handleEmail接受到的參數(shù)，即子組件的值
var Parent = React.createClass({
  getInitialState: function(){
    return {
      email: ''
    }
  },
  handleEmail: function(val){
    this.setState({email: val});
  },
  render: function(){
    return (
      

        
用戶郵箱：{this.state.email}
        
      
    )
  }
});
React.render(
 ,
 document.getElementById('test')
);

例子3.如果還存在孫子組件的情況呢？如下圖，黑框為父，綠框為子，紅框為孫，要求子孫的數(shù)據(jù)都傳給爺爺。原理一樣的，只是父要將爺爺對孫子的處理函數(shù)直接傳下去。

//孫子，將下拉選項的值傳給爺爺
var Grandson = React.createClass({
  render: function(){
    return (
      
性別：
        
          男
          女
        
      
    )
  }
});
//子，將用戶輸入的姓名傳給爹 
//對于孫子的處理函數(shù)，父只需用props傳下去即可
var Child = React.createClass({
  render: function(){
    return (
      

        姓名：
        
      
    )
  }
});
//父組件，準備了兩個state，username和sex用來接收子孫傳過來的值，對應兩個函數(shù)handleVal和handleSelect
var Parent = React.createClass({
  getInitialState: function(){
    return {
      username: '',
      sex: ''
    }
  },
  handleVal: function(event){
    this.setState({username: event.target.value});
  },
  handleSelect: function(event) {
    this.setState({sex: event.target.value});
  },
  render: function(){
    return (
      

        
用戶姓名：{this.state.username}
        
用戶性別：{this.state.sex}
        
      
    )
  }
});
React.render(
 ,
 document.getElementById('test')
);

getDefaultProps && getInitialState

getDefaultProps方法可以用來設置組件屬性的默認值

var MyTitle = React.createClass({
 getDefaultProps : function () {
  return {
   title : 'Hello World'
  };
 },

 render: function() {
   return 
 {this.props.title} 
;
  }
});

ReactDOM.render(
 ,
 document.body
);

getInitialState 方法可以用來設置初始狀態(tài)

 getInitialState: function() {
  return {liked: false};
 },

獲取真實的DOM節(jié)點

從組件獲取真實 DOM 的節(jié)點，這時就要用到ref屬性

var MyComponent = React.createClass({
 handleClick: function() {
  this.refs.myTextInput.focus();
 },
 render: function() {
  return (
   

    
    
   
  );
 }
});

ReactDOM.render(
 ,
 document.getElementById('example')
);

上面代碼中，組件MyComponent的子節(jié)點有一個文本輸入框，用于獲取用戶的輸入。這時就必須獲取真實的 DOM 節(jié)點，虛擬 DOM 是拿不到用戶輸入的。為了做到這一點，文本輸入框必須有一個ref屬性，然后this.refs.[refName]就會返回這個真實的 DOM 節(jié)點。

需要注意的是，由于this.refs.[refName]屬性獲取的是真實 DOM ，所以必須等到虛擬 DOM 插入文檔以后，才能使用這個屬性，否則會報錯。上面代碼中，通過為組件指定Click事件的回調(diào)函數(shù)，確保了只有等到真實 DOM 發(fā)生Click事件之后，才會讀取this.refs.[refName]屬性。

React 組件支持很多事件，除了Click事件以外，還有KeyDown、Copy、Scroll等，完整的事件清單請查看官方文檔。

子組件傳向父組件的另一種思路

父組件調(diào)用子組件的state、function，除了上面介紹的方法之外，也可以通過ref屬性實現(xiàn)。推薦使用這種方式進行子組件向父組件的傳遞。舉個簡單的示范：

export default class 父組件a extends React.Component {
  constructor(props) {
    super(props)  
  }

  render() {
    return (
     <子組件b
        ref={r => this.bbbb =r} // bbbb自定義名字
     />
    )
  }
}

經(jīng)過這樣處理后后，現(xiàn)在父組件a中可以通過this.bbbb.state.xxx獲取子組件的xxx狀態(tài)，也可以通過this.bbbb.xxx獲取子組件的xxx方法。

看完上述內(nèi)容，你們掌握React中怎么實現(xiàn)父子組件傳遞的方法了嗎？如果還想學到更多技能或想了解更多相關內(nèi)容，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！