context是一个全局的属性，写起来较复杂，应避免使用。

假设Index是根组件，Title之类的是子孙组件，我们在根组件上设置context，其他子组件就可以通过this.context.xxx获取到这个值，要修改直接使用setState修改值即可，具体如下

class Index extends Component {
  static childContextTypes = { //必须写这个方法，用来声明传进context的属性
    themeColor: PropTypes.string
  }

  constructor () {
    super()
    this.state = { themeColor: 'red' }
  }

  getChildContext () {   //这个方法用来向context里写东西
    return { themeColor: this.state.themeColor }
  }

  render () {
    return (
      <div>
        <Header />
        <Main />
      </div>
    )
  }
}


//子组件
class Title extends Component {
  static contextTypes = {   //必须，用来声明与验证传进来的属性
    themeColor: PropTypes.string
  }

  render () {
    return (
      <h1 style={{ color: this.context.themeColor }}>React.js 小书标题</h1>
    )
  }
}

赏

谢谢你请我吃糖果

微信