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} = MyContext
  
  export 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 {
      // 第一步：声明接受context
      static 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;
  }
  

  运行效果：