使用 react-intl 在组件外翻译消息键

Question

我正在使用react-intl库进行国际化。在组件内部，我使用injectIntlHOC 来翻译消息键：

import {injectIntl} from 'react-intl';

const Component = props => (
    const message = props.intl.formatMessage({id: 'message.key'});
    // remainder of component omitted
);

export default injectIntl(Component);

如果我不在组件内，是否可以获得消息翻译？

Answer 1

是的！您必须设置您的应用程序以提供 intl 对象，以便您可以从外部反应组件使用它。对于这些情况，您将不得不使用命令式 API。你可以这样做：

import { IntlProvider, addLocaleData, defineMessages } from 'react-intl';
import localeDataDE from 'react-intl/locale-data/de';
import localeDataEN from 'react-intl/locale-data/en';
import Locale from '../../../../utils/locale';

addLocaleData([...localeDataEN, ...localeDataDE]);
const locale = Locale.getLocale(); // returns 'en' or 'de' in my case

const intlProvider = new IntlProvider({ locale, messages });
const { intl } = intlProvider.getChildContext();

const messages = defineMessages({
  foo: {
    id: 'bar',
    defaultMessage: 'some label'
  }
});
const Component = () => (
  const componentMessage = intl.formatMessage(messages.foo);
);

我为我做了不同的设置，但我想这应该适合你。