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
}



最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在使用 React 的过程中,不可避免的需要组件间进行消息传递(通信),组件间通信大体有下面几种情况: 父组件向子...
    柏丘君阅读 93,232评论 7 80
  • 前言 Context被翻译为上下文,在编程领域,这是一个经常会接触到的概念,React中也有。 在React的官方...
    张国钰阅读 54,570评论 17 113
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,957评论 19 139
  • 不论你生于山野,还是长于泥尘,只要有光,你便潋滟而开,化作一副油彩,让人见之不忘。 第一眼便被它惊艳到,开在乡村一...
    西辰姑娘阅读 484评论 4 2
  • 以前对NSUserDefaults的理解很浅显,只是用于存储一些应用内的某些简单的键值对或者存储用户的一些设置。比...
    Scott丶Wang阅读 373评论 0 0