# 祖孫級傳遞數據 ## context特性 > 記住一串單詞組合`getChildContextTypes` > 前3個、后3個、后兩個 > 一個方法、兩個靜態屬性 1.給組先級書寫一個方法 ``` getChildContext(){ return {color:this.state.color}} ``` 2.在祖先級使用屬性校驗規定一下給子組件的數據類型，需要定義一個靜態的（static） `childContextTypes` ```javascript static childContextTypes = { color:ReactProps.string } ``` 3.孫子組件，使用之前先檢驗一下數據類型，需要定義一下 ```javascript static contextTypes = { color:ReactProps.string } ``` 4.再使用{this.context.color} # 非父子組件通信 沒有嵌套關系的，那只能通過影響全局的一些機制去實現。這樣看，自定義事件機制不失為一種很好的方案。在這邊使用了 `EventEmitter` 模塊（`npm`包 `node`的基礎模塊）進行通信。 安裝自定義事件庫`yarn add enentemitter2`相當于（vue-bus） ``` import React, {Component,PropTypes} from 'react' import ReactDom from 'react-dom' //1.導入 import {EventEmitter2} from 'eventemitter2' //2.生成實例 var emitter = new EventEmitter2() class First extends Component { constructor(props){ super(props) this.state = { data: 'init First' } //監聽 emitter.on('changeFirstText', this.changeText.bind(this)) } changeText( msg ){ this.setState({ data: 'First change success: origin ' + msg }) } render (){ return <div> <h1>{this.state.data}</h1> </div> } } class Second extends Component { handleClick(){ //4.觸發 emitter.emit('changeFirstText', 'Second') } render (){ return <div onClick={ this.handleClick.bind(this) }> <button>點擊修改 First 組件內容</button> </div> } } ```