web-dev-qa-db-ja.com

React-Intlで現在のロケールにアクセスする方法はありますか？

React-Intlで現在設定されているロケールにアクセスする方法があるかどうか疑問に思っていましたか？

私がこれを作成するとしましょう：

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

アプリでは、IntlProviderに渡したロケールにアクセスするために、このようなことをしたいと思います

this.props.locale

そのようなことをする方法はありますか？

ありがとう。

javascriptreactjsreact-nativereact-intl
16
alexmngn

新しい答え-フックの使用（元は以下を参照）

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

はい、子コンポーネントの現在のロケールにアクセスする場合、IntlProviderがコンテキストを提供しているため、最善の方法はcontextを読み取ることです。アプリまたはその他のコンポーネントで、アクセスするコンテキストを定義します。

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

これで、コンポーネントの現在のロケールを次のように読み取ることができます。

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