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

Question

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

のは、私は、これは作成しましょう：私はIntlProvider

this.props.locale 

に渡されたロケールにアクセスするためには、

アプリで

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

、私はこのような何かをしたいと思いますありますそんなことをする方法は？

ありがとうございました。

Answer 1

はい、子コンポーネントの現在のロケールにアクセスする場合は、コンテキストを読み込むことをお勧めします。これは、IntlProviderがコンテキストを提供しているためです。 アプリまたは任意の他のコンポーネントにアクセスしたいコンテキストを定義します。あなたがいずれかの現在のロケールを取得することができます

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

Answer 2

：

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

今、あなたは次のようにコンポーネントの現在のロケールを読むことができますあなたのアプリケーションのコンポーネントを、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);