主要用于 后代组件通讯
在应用中一般不用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>
)
}
