使用react-intl在組件外部翻譯消息密鑰

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

我為我做了其他設置，但是我想這應該對您有用。