16 - context

主要用于 后代组件通讯

在应用中一般不用context,一般都用到他封装react插件

import React, { Component } from 'react'
import './index.css'

// 创建context对象
const MyContext = React.createContext()
const {Provider,  Consumer} = MyContext
export default class A extends Component {
 state = {
   username: 'tom',
   age: 18
 }
 render() {
   let {username, age} = this.state
   return (
     <div>
       <h4>我是A组件我的名字是: {username}</h4>
       {/* <MyContext.Provide>
         <B username={this.state.username}/>
       </MyContext.Provide> */}
       <Provider value={{username, age}}>
         <B/>
       </Provider>
     </div>
   )
 }
}

class B extends Component {
 render() {
   return (
     <div>
       <h4>我是B组件 我从A组件接收到的名字是: </h4>
       <C />
     </div>
   )
 }
}

class C extends Component {

 //声明接受context
 static contextType = MyContext
 render() {
   const {username, age} = this.context 
   return (
     <div>
         <h4>我是C组件 我从A组件接收到的名字是: {username}{age}</h4>
         <D/>
     </div>
   )
 }
}

function D () {
 return (
   <div>
        <h4>我是D组件 我从A组件接收到的名字是:
          <Consumer>
            {
             //  value => <span>{value.username}年龄是{value.age}</span>
              value => `${value.username}年龄是${value.age}`
            }
            </Consumer>
         </h4>
   </div>
 )
}