Question

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

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对象，以便可以从外部react组件中使用它。在这些情况下，您将必须使用命令式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);
);

我为我做了其他设置，但是我想这应该对您有用。

使用react-intl在组件外部翻译消息密钥

1 个答案: