react 跨级组件通信

跨级组件通信
所谓跨级组件通信，就是父组件向子组件的子组件通信，向更深层的子组件通信。跨级组件通信可以采用下面两种方式：

1.中间组件层层传递 props
2.使用 context 对象

使用 context 是一种可行的方式，context 相当于一个全局变量，是一个大容器，我们可以把要通信的内容放在这个容器中，这样一来，不管嵌套有多深，都可以随意取用。
使用 context 也很简单，需要满足两个条件：

1上级组件要声明自己支持 context，并提供一个函数来返回相应的 context 对象
2.子组件要声明自己需要使用 context

例如：

import React from 'react';
import Proptype from 'prop-types';

export default class Attented extends React.Component{
    constructor(props,context){
        super(props,context)
        let data=context.router.route.location.data;
        if(data&&Object.keys(data).length){
         window.localStorage.setItem('detali',JSON.stringify(data));
        }else{
            data:{}
        }
        this.state={
            data
        }
    
    }
    componentDidMount(){
         if(!Object.keys(this.state.data).length){
            this.setState({
                data:JSON.parse(window.localStorage.getItem('detali')) 
            })
         }   
    }
    render(){
        if(!Object.keys(this.state.data).length){
        return null
         }  
        return <div>
        <p>{this.state.data.target.question.title}</p>
        <p>{this.state.data.target.question.excerpt}</p>
        </div>
    }
}
Attented.contextTypes={
    router:Proptype.object.isRequired
}