定义:
Context 提供了一种方式,能够让数据在组件树中传递而不必一级一级手动和传递
item 或者任意组件都可以访问到Window
结构:
创建
createContext(defaultValue)
// 传一个默认值 90
const BatteryContext = createContext(90);
const OnlineContext = createContext();
// 可以同时创建多个 createContext
class App extends Component {
state = {
online:false,
battery:60
}
render() {
// 导入 两个定义的值
const { battery,online } = this.state;
return (
//使用两个Context 需要使用嵌套方式
//<BatteryContext.Provider value={battery}>
<OnlineContext.Provider value={online}>
//通过 button按钮来实现 battery-1(当使用默认值时不对默认值起作用)
<button type='button' onClick={()=>this.setState({battery:battery-1})} >
Press
</button>
//通过 button按钮来实现 online 取反
<button type='button' onClick={() => this.setState({ online: !online})} >
Switch
</button>
<Middle/>
</OnlineContext.Provider>
//</BatteryContext.Provider>
)
}
}