Question

我正在尝试使用标准<FormattedMessage../>组件直接在comp之外调用formatMessage（）API。

const locale = 'en';
const messages= defineMessages({
    greeting: {
        id: 'app.greeting',
        message:"some message",
        defaultMessage: 'Hello,all',
        description: 'Greeting to welcome the user to the app',
    }
});
const { intl } = new IntlProvider({locale, messages}).getChildContext();
export function someFunc(key, values) {
   return intl.formatMessage({id:'greeting'});
}

以上是本地定义的静态消息，但我有一个全局存储的翻译文件，en.json和ja.json，我想从中加载消息。我怎样才能使用defineMessages，所以当我调用formatMessage（）时，我应该能够根据所选的语言环境看到来自resp文件的消息... 想法赞赏!! 谢谢！

Answer 1

我不知道您的.json文件的格式，但您可以重新格式化它们（如果需要），因此其中的每个键至少包含id和defaultMessage（{{ 3}}）并传递给defineMessages()函数。

import enMessages from 'path/to/en.json'
import jaMessages from 'path/to/ja.json'
const localeMessages = locale === 'en' ? enMessages : jaMessages

const messages= defineMessages(localeMessages);

...
const { intl } = new IntlProvider({locale, messages}).getChildContext();
intl.formatMessage({id:'greeting'});

Answer 2

如果使用react-router npm包，您可以将IntlProvider组件（来自react-intl npm包）设置为路径定义中的主要路径。这意味着所有翻译都作为道具传递给您的组件，即您可以使用this.props.messages.myMessage访问特定邮件：

import { IntlProvider, addLocaleData } from 'react-intl';
import en from 'react-intl/locale-data/en';

addLocaleData(en);
let locale = 'en-GB';
const messages = require("./i18n/" + locale + ".i18n.json");
const renderRoutes = ({ locale, messages }) => (
    <IntlProvider locale={locale} messages={messages}>
    ...
    </IntlProvider>
);
ReactDom.render((renderRoutes({ locale, messages })), this.container);

如何调用formatMessage（）来加载.json文件中的消息

2 个答案: