主要用于 后代組件通訊
在應(yīng)用中一般不用context,一般都用到他封裝react插件
import React, { Component } from 'react'
import './index.css'
// 創(chuàng)建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>
)
}
