Javascript 是否有任何方法可以使用React Intl访问当前区域设置？

我想知道是否有任何方法可以使用React Intl访问当前设置的语言环境

假设我创建了这个：

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

有没有办法做那样的事

---

谢谢。

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

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

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

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

render（）{
返回(
{this.context.intl.locale}
)
}

新答案-使用挂钩（原始答案见下文）

从'react intl'导入{useIntl}；
常量MyComponent:FC=（）=>{
常量intl=useIntl（）
返回{`当前语言环境：${intl.locale}`}
}
导出默认MyComponent

---

旧答案 您只需从React Intl的“注入API”访问应用程序的任何组件，即可获得当前区域设置：

从'react intl'导入{injectIntl，intlShape}；
常量属性类型={
intl:intlShape.isRequired，
};
常量MyComponent=（{intl}）=>(
{`当前语言环境：${intl.locale}`}
);
MyComponent.propTypes=propTypes
导出默认injectIntl（MyComponent）；

injectIntl

是访问

intl

对象的一种更干净的方法。差不多2年后，我们现在有了一个钩子来实现这一点@pierre你想更新你的答案吗？您可以

const intl=useIntl（）；console.log（intl.locale）

Hi@Bruford，谢谢。我很乐意更新我的答案，但我必须承认我还没有练习钩子（我目前正在其他堆栈上工作）。你能用hook把更新后的答案发给我吗？你甚至可以这样做：const{locale}=useIntl（）

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

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