react 静态属性ContextType访问跨层级组件的数据

import styles from './index.less';
import React, { Component, createContext } from 'react'

const BatteryContext = createContext(0);
//创建createContext实例对象，必须传一个默认值,默认值的意义就是Consumer向上找不到对于的Provider就会展示该默认值

class Leaf extends Component {
  static contextType = BatteryContext //将BatteryContext实例对象赋值给静态属性contextType

  render() {
    const battery = this.context
    //设置了contextType之后Leaf组件在运行时候就会获得一个新的属性this.context
    //从而无需再使用BatteryContext.“Consumer
    return (
      <h1 className={styles.title}>Battery:{battery}</h1>
    )
  }
}

class Middle extends Component {
  render() {
    return <Leaf />
  }
}

export default class IndexPage extends Component {
  state = {
    battery: 60,
  };
  render() {
    const { battery } = this.state;
    return (
      <div>
        <BatteryContext.Provider value={battery}>
          <button type="button" onClick={() => this.setState({ battery: battery - 1 })}>Press</button>
          <Middle />
        </BatteryContext.Provider>
      </div>
    );
  }
}