IntlContext

存放语言文件的 Context.js

import {createContext} from 'react';
const { Provider, Consumer } = createContext({
  locale: '',
  messages: {},
  formatMessage: () => {},
});
export {
  Provider,
  Consumer,
};

语言文件在应用运行时，不要经常更新
避免 Context 中的数据变化引起应用整体重绘所带来的性能问题

通过 props 传入的国家码、语言文件及读取语言文件中某一个 key 值的函数注入到 Context 的 value 对象中

import { Provider } from './IntlContext';
class IntlProvider extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: {
        locale: props.locale,
        messages: props.messages,
        formatMessage: this.formatMessage,
      },
    };
  }
  formatMessage = (config) => {
    const { id } = config;
    const message = this.state.value.messages[id];
    if (message === undefined) {
      console.warn(`[react-intl-context]: Message key ${id} is undefined. Fallback to empty string.`);
      return '';
    }
    return message;
  }
  render() {
    return (
      <Provider value={this.state.value}>
        {this.props.children}
      </Provider>
    );
  }
}

再封装一个高阶组件作为 Context 的 Consumer

import React from 'react';
import { Consumer } from './IntlContext';
const injectIntl = (WrappedComponent) => {
  const InjectIntl = props => (
    <Consumer>
      {value => <WrappedComponent {...props} intl={value} />}
    </Consumer>
  );
  return InjectIntl;
};
export default injectIntl;

最后，将页面组件包裹在 injectIntl 这个高阶组件中，页面组件接收到一个名为 intl 的 props；
调用 props.intl.formatMessage 并传入相应的占位符 key 值，即可读取到语言文件中的相应翻译。

import { injectIntl } from 'react-intl-context';
class OutletDetail extends Component {
  render() {
    const { intl } = this.props;
    return (
      <div className="view-outletDetail">
        <Button>
          {intl.formatMessage({ id: 'outletDetail_showNotification' })}
        </Button>
      </div>
    );
  }
}
export default injectIntl(OutletDetail);

https://github.com/AlanWei/react-intl-context/tree/master/src