概述

既然有了組件，那么組件之間如何進(jìn)行通信呢？

Demo

在線運(yùn)行

預(yù)覽

這個(gè) demo 主要的功能有：

• Parents 組件向 Son1 和 Son2 組件傳遞一個(gè) age 屬性
• Son1 和 Son2 組件都可以更改自己的名字
• Son1 和 Son2 組件都可以 call parent，并且將自己的名字傳給 Parents 組件，當(dāng) Parents 組件接收到之后，將此 Son 的 age 增加1并且將誰 call 的顯示在頁面中
• demo 中還有一個(gè) style 的變換
  
  style 變換

父子組件之間通信

其中 Parents 組件是父組件，Son1 和 Son2 組件是子組件，父組件向子組件傳遞參數(shù)直接在標(biāo)簽后添加屬性即可

父組件向子組件傳遞參數(shù)

子組件使用 props 接收父組件傳遞的參數(shù)

子組件使用 props 接收參數(shù)

子組件通知父組件是通過回調(diào)形式，父組件給子組件傳遞一個(gè)參數(shù)( function )，子組件在適當(dāng)?shù)臅r(shí)候調(diào)用此參數(shù) ( function )，并且可以傳遞一些必要的參數(shù)。例如： demo 中的 this.state.name

<button onClick={this.props.callParent.bind(this, this.state.name)}>call parent</button>

更深層次的通信

將上述例子復(fù)雜化，在 Son1 和 Son2 組件上增加一個(gè) Home 組件，此時(shí) Son1 和 Son2 組件無法直接接收到 callParent 和 age 屬性。這時(shí)將 callParent 和 age 屬性依次傳遞下去即可（在線運(yùn)行）

更深層次的通信