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

定义:

Context 提供了一种方式,能够让数据在组件树中传递而不必一级一级手动和传递

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

item 或者任意组件都可以访问到Window

结构:
Context 实现跨层级的组件数据传递
创建

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>
      )
  }
}
上一篇:for 循环的多线程并行执行


下一篇:学习视频网站