Есть ли способ получить доступ к текущему языку с помощью React-Intl?

Мне было интересно, есть ли способ получить доступ к текущему установленному языку с помощью React-Intl?

Скажем, я создаю это:

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

В приложении я хотел бы сделать что-то подобное, чтобы получить доступ к языку, который я передал IntlProvider

this.props.locale

Есть ли способ сделать что-то подобное?

Спасибо.


react-native reactjs javascript react-intl
person alexmngn    schedule 21.07.2017    source источник

Ответы (2)


arrow_upward
35
arrow_downward

Новый ответ - с помощью крючков (оригинал см. Ниже)

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);
person pierrepinard_2    schedule 26.01.2018
comment
Почти 2 года спустя, и теперь у нас есть крючок для этого @pierre, вы хотите обновить свой ответ? ты можешь const intl = useIntl(); console.log(intl.locale) - person Bruford; 29.11.2019
comment
Привет @Bruford, спасибо за это. Я бы с радостью обновил свой ответ, но должен признать, что еще не практиковал хуки (сейчас я работаю над другими стеками). Не могли бы вы прислать мне обновленный ответ с крючком? - person pierrepinard_2; 02.12.2019
comment
Вы даже можете сделать: const {locale} = useIntl () - person Diogyn; 08.12.2020

arrow_upward
2
arrow_downward

Да, если вы хотите получить доступ к текущему языку в любом дочернем компоненте, лучше всего будет прочитать context, потому что IntlProvider предоставляет контекст. Определите в своем приложении или любом другом компоненте контекст, к которому вы хотите получить доступ:

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

Теперь вы можете прочитать текущий языковой стандарт в своем компоненте, например:

render() {
    return (
        <div>{this.context.intl.locale}</div>
    )
}
person Borys Kupar    schedule 27.07.2017
comment
injectIntl - более чистый способ доступа к объекту intl. - person Sébastien Rosset; 01.10.2019