react-intl - accessing nested messages

问题

I'm trying to use react-intl package inside an app. The app is rendered on the server so I wrote some code to determine which language to use and serve into IntlProvider.

Translations were provided in messages.js file and they look like this:

export default {
  en: {
    message: '...some message',
    nested: {
      anotherMessage: '...another message',
    }
  }
  de: {
    // ...
  }
}

What I do is something like this:

// 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>

Then when I use FormattedMessage component I can't access the nested message (anotherMessage) with code like this:

<FormattedMessage id="nested.anotherMessage" ... />

But message is accessible.

Any ideas where I made the mistake, or maybe I'm missing something in the whole concept?

回答1:

Since React Intl v2 no longer supports nested messages objects, the messages need to be flattening.

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

refs:

https://github.com/yahoo/react-intl/wiki/Upgrade-Guide#flatten-messages-object
https://github.com/yahoo/react-intl/issues/162#issuecomment-139683466

回答2:

import flatten from 'flat'

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

回答3:

Yes, customization using flattenMessages is the best way I found.

Here is the video demo for your reference.

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

来源：https://stackoverflow.com/questions/45783677/react-intl-accessing-nested-messages

标签

javascript

reactjs

react-intl