有没有办法用React-Intl访问当前的语言环境？

Question

我想知道是否有任何方法可以使用React-Intl访问当前设置的区域设置？

假设我创建了这个:

render() {
  return (
    <IntlProvider locale="en">
      <App>
    </IntlProvider>
  );
}

在App中,我想做这样的事情,以便访问我传递给的语言环境 IntlProvider

this.props.locale

有没有办法做那样的事情？

谢谢.

Answer 1

您可以通过从React Intl的"注入API"访问它来获取应用程序的任何组件中的当前区域设置:

import {injectIntl, intlShape} from 'react-intl';

const propTypes = {
  intl: intlShape.isRequired,
};

const MyComponent = ({intl}) => (
  <div>{`Current locale: ${intl.locale}`}</div>
);

MyComponent.propTypes = propTypes

export default injectIntl(MyComponent);

Answer 2

是的，如果您想访问任何子组件中的当前语言环境，最好的方法是读取context，因为 IntlProvider 提供了上下文。在您的应用程序或任何其他组件中定义您想要访问的上下文：

App.contextTypes = {
    intl: PropTypes.object
};

现在您可以读取组件中的当前区域设置，如下所示：

render() {
    return (
        <div>{this.context.intl.locale}</div>
    )
}