React Context 的使用

[SevenChan07]

Context 提供了一种无需为每层组件添加props，就能在组件树之间进行数据传递的方法。
官方文档

[SevenChan07]

一个React.Context的简单例子：

// React.createContext 是新的 API，接收一个任意值作为默认值，并返回一个 Context 对象
// Context 对象有两个属性：Provider 和 Consumer，均为 React 的 Component
const ColorContext = React.createContext('red')
const { Provider, Consumer } = ColorContext
// 将 Context.Provider 包裹在你想应用 Context 的组件上，可指定 `value` 值，否则将使用默认值
const Wrapper = () => (
    <Provider value='red'>
        <Text></Text>
    </Provider>
)

// 当要用到 Context 里的值时，用 Context.Consumer 包裹
// 里面的 chlidren 只能是一个render 函数，并且函数的第一个参数就是 Context 的值
const Text = () => (
    <Consumer>
        {color => (
            <p style={{ color }}>This is Red!</p>
        )}
    </Consumer>
)

[SevenChan07]

一个React.Context动态修改的例子

context.js。 createContext只是把要传递的值和方法给初始化好，更直接得说就是把属性定义一下。

import React from 'react'

export const ThemeContext = React.createContext({
  color: 'blue',
  toggleColor: () => {},
})

hello.js。 使用Provider方法，将值从顶层组件中传入。

import React from 'react'
import {ThemeContext} from './context'
import ComponentA from './componenta'

export default class Hello extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      color: 'red',
    }
  }

  toggleColor(e) {
    this.setState({
      color: e,
    })
  }

  render() {
    const {state} = this.state

    return (
      <ThemeContext.Provider value={{
        color,
        toggleColor: e => this.toggleColor(e),
      }}>
        <div>
          `this is ${color}`
          <div>
            <ComponentA />
          </div>
        </div>
      </ThemeContext.Provider>
    )
  }
}

componenta.js。 Consumer的子节点必须要是一个方法。

import React from 'react'
import { ThemeContext } from './context'

export default class ComponentA extends React.Component {
  handleKeyDown() {
  }

  render() {
    return (
      <ThemeContext.Consumer>
        {
          ({ color, toggleColor }) => (
            <div className="component-a">
              <div
                role="button"
                tabIndex="0"
                onClick={() => toggleColor('blue')}
                onKeyDown={this.handleKeyDown}
              >
                component-a
              </div>
            </div>
          )
        }
      </ThemeContext.Consumer>
    )
  }
}