React Context的使用及典型使用场景

const {Provider, Consumer} = React.createContext(defaultValue);

<Provider value={/*共享的数据*/}>
  /*里面可以渲染对应的内容*/
</Provider>

<Consumer>
  {value => /*根据上下文  进行渲染相应内容*/}
</Consumer>

import React from "react";
// 英文状态
const enStrings = {
  submit: "Submit",
  cancel: "Cancel"
};
// 中文状态
const cnStrings = {
  submit: "提交",
  cancel: "取消"
};
// 创建一个数据提供与数据消费者，同时可以赋初值
const {Provider,Consumer} = React.createContext(enStrings);

// 父组件数据提供者
class LocaleProvider extends React.Component {
  state = { locale: cnStrings };
  // 切换语言
  toggleLocale = () => {
    const locale = this.state.locale === enStrings? cnStrings: enStrings;
    this.setState({ locale });
  };
  render() {
    return (
      // 父组件提供数据
      <Provider value={this.state.locale}>
        <button onClick={this.toggleLocale}>
          切换语言
        </button>
        {this.props.children}
      </Provider>
    );
  }
}

// 子组件消费数据
class LocaledButtons extends React.Component {
  render() {
    return (
      // 子组件消费数据
      <Consumer>
        {locale => (
          <div>
            <button>{locale.cancel}</button>
            &nbsp;<button>{locale.submit}</button>
          </div>
        )}
      </Consumer>
    );
  }
}

export default () => (
  <div>
    <LocaleProvider>
      <div>
        <br />
        <LocaledButtons />
      </div>
    </LocaleProvider>
    <LocaledButtons />
  </div>
);