我正在尝试在应用程序内使用react-intl包。该应用程序在服务器上呈现，因此我编写了一些代码来确定要使用的语言并在IntlProvider中使用。
翻译在messages.js文件中提供，它们看起来像这样:
export default {
en: {
message: '...some message',
nested: {
anotherMessage: '...another message',
}
}
de: {
// ...
}
}
我所做的是这样的:
// import messages from './messages.js'
// Check the locale for the user (based on cookies or other things)
const locale = ...
// Get the required messages
const messagesForLocale= = messages[locale];
// Supply the messages to the IntlProvider
<IntlProvider locale={locale} messages={messagesForLocale}>
// ...
</IntlProvider>
然后，当我使用
FormattedMessage组件时，无法使用以下代码访问嵌套消息(anotherMessage):<FormattedMessage id="nested.anotherMessage" ... />
但是
message是可访问的。我在哪里弄错了，或者在整个概念中我遗漏了什么？
最佳答案
由于React Intl v2不再支持嵌套的消息对象，因此需要对消息进行展平。
export const flattenMessages = ((nestedMessages, prefix = '') => {
if (nestedMessages === null) {
return {}
}
return Object.keys(nestedMessages).reduce((messages, key) => {
const value = nestedMessages[key]
const prefixedKey = prefix ? `${prefix}.${key}` : key
if (typeof value === 'string') {
Object.assign(messages, { [prefixedKey]: value })
} else {
Object.assign(messages, flattenMessages(value, prefixedKey))
}
return messages
}, {})
})
// Use flattenMessages
<IntlProvider locale={locale} messages={flattenMessages(messagesForLocale)}>
引用:
关于javascript - react-intl-访问嵌套消息，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45783677/