react-intl-访问嵌套消息

小编典典

react-intl-访问嵌套消息

reactjs

我正在尝试在应用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可以访问。

我在哪里弄错了，或者在整个概念中我遗漏了什么？

阅读 418

2020-07-22

共1个答案

小编典典

由于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)}>

参考：

2020-07-22