如何调用formatMessage()从.json文件加载消息

Question

我试图使用标准的formatMessage组件直接在comp /o之外调用<FormattedMessage../> () 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 (详细信息)，并传递给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);