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

Question

我正在尝试使用标准 <FormattedMessage../> 组件直接在 comp w/o 外部调用 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（ details) 并传递给 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 文件加载消息

How to call the formatMessage() to load the messages from the .json files

reactjs

react-intl