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

Question

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

假设我创建了这个：

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

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

this.props.locale

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

谢谢。

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

Answer 2

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

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

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

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