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

Posted 2023-02-19

【中文标题】有没有办法使用 React-Intl 访问当前的语言环境？

【英文标题】：Is there any way to access the current locale with React-Intl?

【发布时间】：2017-12-27 17:04:48

【问题描述】：

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

假设我创建了这个：

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

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

this.props.locale

有什么办法可以做这样的事情吗？

谢谢。

【参考方案1】：

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

import  useIntl  from 'react-intl';

const MyComponent: FC = () => 
    const intl = useIntl()
    return <div>`Current locale: $intl.locale`</div>


export default MyComponent

---

旧答案

您可以通过简单地从 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);

【讨论】：

差不多 2 年后，我们现在有一个钩子可以做到这一点@pierre 你想更新你的答案吗？你可以const intl = useIntl(); console.log(intl.locale)

嗨@Bruford，谢谢你。我很乐意更新我的答案，但我必须承认我还没有练习过钩子（我目前正在研究其他堆栈）。你能用钩子把更新的答案发给我吗？

你甚至可以这样做： const locale = useIntl()

【参考方案2】：

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

App.contextTypes = 
    intl: PropTypes.object
;

现在您可以读取组件中的当前语言环境，例如：

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

【讨论】：

injectIntl 是访问intl 对象的一种更简洁的方式。