Context的用法

//1 创建Context容器对象：
cosnt XxxContext = React.createContext();
// 2 渲染子组件时，外面包裹XxxContext.provider，通过value属性给后代组件传递数据：
<xxxComponent.Provider value={数据}>
  子组件
</xxxComponent.Provider>
// 3 后代组件读取数据
// 写法一 
// 特点：简便、主要用在类组件
static contextType = xxxContext  //声明接收context
this.context //读取context中的value数据
// 写法二
// 特点：不需要this、可以接收多个context、主要用在函数组件
<xxxContext.Consumer>
  {
    value=>( //value就是context中的value数据
      要显示的内容
    )
  }
</xxxContext.Consumer>

import React, { Component } from 'react';

// 创建Context对象
const MyContext = React.createContext()
const { Provider, Consumer } = MyContext;

class A extends Component {

  state = {
    name: 'tom',
    age:15
  }

  render() {
    const {name,age}= this.state
    return (
      <div>
        <h2>组件A</h2>
        <Provider value={{name,age}}>
          <B/>
        </Provider>
        
        <hr />
      </div>
    );
  }
}



class B extends Component {
  render() {
    //  console.log(this)
    return (
      <div>
         <hr />
        <h2>组件B</h2>
        <C/>
       
      </div>
    );
  }
}
// class C extends Component {
// // 声明接收
// static contextType = MyContext
//   render() {
//     const { name, age } = this.context;
//     return (
//       <div>
//          <hr />
//         <h2>组件C</h2>
//         <p>{name}-------{age}</p>
       
//       </div>
//     );
//   }
// }
function C (){
    return (
      <div>
         <hr />
        <h2>组件C</h2>
        <p>
          <Consumer>
            {(value)=>(`${value.name}--------${value.age}`)}
          </Consumer>
        </p>     
      </div>
    )  
}
export default A;