# 祖孙级传递数据 ## 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> } } ```