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>
    )
}

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

2 个答案: