react父子元件通訊

react父子間通訊的幾種情況

• 父元件向子元件通訊
• 子元件向父元件通訊
• 跨級元件通訊
• 兄弟元件通訊

父元件向子元件通訊

由於react是單向資料流向的，父元件一般通過props向子元件傳遞相關的一些資訊
來看一下下面這個例子，在這裡我封裝了一個modal元件，它的顯示與取消的狀態交由父元件來管理，它們之間的關係用一張圖表示
流程圖
程式碼如下

​ 父元件程式碼

這樣子元件中的visible就被父元件接管了

子元件向父元件通訊

子元件向父元件通訊同樣需要父元件向子元件傳遞props，只是父元件傳遞的是是作用域為自己的函式，子元件呼叫次函式，並將子元件想要傳遞的資訊，作為引數，傳遞到父元件的作用域中

還是以上面的這個例子距離，當開啟模態框的時候，通過父元件的

showModal()方法，改變visible的值，通過props傳遞到子元件，

關閉模態框是由內向外的。模態框在內部改變visible的值在把它傳遞給外部的方法

程式碼如下

父元件

跨級元件通訊

通過context進行通訊，我們可以把元件之間的關係想象成一個元件樹，原始的方法就是通過props一級一級的把狀態往下傳，在通過呼叫方法一級一級傳回去，另一種方法就是在他們之間設定一個區域，每個元件都可以訪問到，相當於父元件下的一個全域性變數

程式碼

最頭部的父元件

class Index extends Component {
  static childContextTypes = {
    themeColor: PropTypes.string
  }

  constructor () {
    super()
    this.state = { themeColor: 'red' }
  }

  getChildContext () {
    return { themeColor: this.state.themeColor }
  }

  render () {
    return (
      <div>
        <Header />
        <Main />
      </div>
    )
  }
}複製程式碼

要在父元件設定這個context區域，在childContextTypes中設定允許子元件們訪問的變數的名稱，getChildContext（）會設定這個區域，這樣所有的子元件都可以訪問到themeColor這個引數了

子元件如何訪問

class Title extends Component {
  static contextTypes = {
    themeColor: PropTypes.string
  }

  render () {
    return (
      <h1 style={{ color: this.context.themeColor }}>React.js 小書標題</h1>
    )
  }
}複製程式碼

通過在this.context的方式就可以訪問到了