react-intl

Question

我正在尝试在应用程序中使用 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 是可以访问的。

有没有我犯错的想法，或者我在整个概念中遗漏了什么？

Answer 1

由于 React Intl v2 不再支持嵌套消息对象，消息需要 flattened.

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

参考文献：

Answer 2

是的，使用 flattenMessages 进行自定义是我发现的最佳方式。

这里有演示视频供大家参考。

https://egghead.io/lessons/react-convert-a-hard-coded-string-using-react-intl-formattedmessage

Answer 3

react-intl 不再支持嵌套消息。如果您仍然想以这种方式组织您的消息，您可以使用 flat 库来预先更正您的消息结构。

import flatten from 'flat'

<IntlProvider locale={locale} messages={flatten(messagesForLocale)}>

react-intl 的贡献者声称仅支持平面消息结构的主要原因是：

Simplicity and flexibility is the main reason. With the flat object, people can write whatever message ids/keys they want and they won't be interpreted with special semantics.

查看问题支持嵌套消息对象评论 GitHub。

react-intl - 访问嵌套消息

react-intl - accessing nested messages

javascript

reactjs