3

<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文件的消息......感谢您的想法!谢谢!

4

2 回答 2

2

我不知道您的.json文件的格式,但您可以重新格式化它们(如果需要),以便它们中的每个键至少具有iddefaultMessage详细信息)并传递给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'});
于 2017-05-17T06:36:05.303 回答
1

如果使用react-routernpm 包,您可以将IntlProvider组件(来自react-intlnpm 包)设置为路由定义中的主路由。这意味着所有翻译都作为道具传递给您的组件,即您可以使用以下命令访问特定消息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);
于 2017-07-01T18:20:28.443 回答