react组件间通信之context

• 一般用于【祖组件】与【后代组件】间通信

  案例：

  A,B,C,D四个组件的关系分别为：爷爷，爸爸，儿子，孙子
  从A向C传递参数：C组件为类式组件
  从A向D传递参数：D组件为函数组件

  import React, { Component } from 'react'
  import './index.css'/*** 【祖组件】与【后代组件】间通信*/// 创建Context容器对象：
  const MyContext = React.createContext()
  const {Provider,Consumer} = MyContextexport default class A extends Component {state = {name:'sun',age:18}render() {const {name,age} = this.state;return (<div className='one'><h5>A组件</h5><div>我的名字是：{name}</div>{/* 渲染子组件时，外面包裹Provider，通过value属性给后代组件传递参数 */}<Provider value={{name,age}}><B></B></Provider></div>)}
  }class B extends Component {render() {return (<div className='two'><h5>B组件</h5><C></C></div>)}
  }/*** 后代组件读取数据* 方式一：仅使用于类组件*/
  class C extends Component {// 第一步：声明接受contextstatic contextType = MyContext;render() {return (<div className='three'><h5>C组件</h5>{/* 第二步：读取context中的value数据 */}<div>C组件从A组件拿到的名字是：{this.context.name}</div>        <D></D></div>)}
  }/*** 后代组件读取数据* 方式二：函数组件与类组件都可以*/
  function D(){return(<div className='four'><h5>D组件</h5><div>D组件从A组件拿到的名字是：<Consumer>{value => `${value.name}，年龄是：${value.age}。`}</Consumer></div></div>)
  }

  样式文件：

  .one{width: 500px;background-color: red;padding: 20px;
  }
  .two{width: 90%;background-color: orange;padding: 20px;
  }
  .three{width: 90%;background-color: yellow;padding: 20px;
  }
  .four{width: 90%;background-color: green;padding: 20px;
  }
  

  运行效果：