如何調用formatMessage（）從.json文件加載消息

Question

我試圖直接使用標準<FormattedMessage../>組件調用格式消息（）API之外的comp w/o。

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