Context 实现跨层级的组件数据传递

定义：

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>
      )
  }
}

标签：createContext,层级,const,battery,Context,online,组件,默认值
来源： https://blog.csdn.net/weixin_50001396/article/details/116380716