使用 context 获取全局状态
文章目录

React: 使用 context 获取全局状态

任何时候都不建议使用这个方法

实际上很简单,在父控件里面将一些东西扔到 context 即可。

父控件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
class Index extends Component {
  static childContextTypes = {
    themeColor: PropTypes.string
  }
  // 这个地方是验证  `getChildContext`  返回的对象,这个验证非常重要,因为设置 context 非常危险。

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

  getChildContext () {
    return { themeColor: this.state.themeColor }
  }
  // 这也就是将内容设置到 context 的过程

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

然后接下来在子控件中需要这样获取:

1
2
3
4
5
6
7
8
9
10
11
12
13
class Title extends Component {
  static contextTypes = {
    themeColor: PropTypes.string
  }
  // 同样的,这里的判断也非常重要

  render () {
    return (
      <h1 style={{ color: this.context.themeColor }}>React.js 小书标题</h1>
    )
  }
  // 直接使用 this.context.themeColor  就可以访问
}