react 跨级举荐通信

Context 是什么？
Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。在一个典型的 React 应用中，数据是通过 props 属性自上而下（由父及子）进行传递的，但这种做法对于某些类型的属性而言是极其繁琐的（例如：地区偏好，UI 主题），这些属性是应用程序中许多组件都需要的。Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props。
 

1- 创建 Context 对象 导出 Provider 和 Consumer 对象

//context.js

import { createContext } from "react";

export default createContext();

2- 使用 Provider 包裹上层组件提供数据

import myContext from './context.js'

<myContext.Provider value={this.state.message}>

    {/* 根组件 */}

</myContext.Provider>

3- 需要用到数据的组件使用 Consumer 包裹获取数据

<myContext.Consumer >

    {value => /* 基于 context 值进行渲染*/}

</myContext.Consumer>