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 (
     

       
我是A组件我的名字是: {username}
       {/* 
         
        */}
       
         
       
     

   )
 }
}

class B extends Component {
 render() {
   return (
     

       
我是B组件 我从A组件接收到的名字是: 
       
     
   )
 }
}

class C extends Component {

 //声明接受context
 static contextType = MyContext
 render() {
   const {username, age} = this.context 
   return (
     

         
我是C组件 我从A组件接收到的名字是: {username}{age}
         
     
   )
 }
}

function D () {
 return (
   

        
我是D组件 我从A组件接收到的名字是:
          
            {
             //  value => {value.username}年龄是{value.age}
              value => `${value.username}年龄是${value.age}`
            }
            
         
   
 )
}