react-intl - ネストされたメッセージにアクセスする

Question

react-intlパッケージをアプリ内で使用しようとしています。アプリケーションはサーバー上でレンダリングされるので、使用する言語を決定するためのコードを書いてIntlProviderに送信します。

翻訳はmessages.jsファイルで提供し、彼らはこのようになりました：私はFormattedMessageコンポーネントを使用する際にその後、私はアクセスすることはできません

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

：

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

私は何をやっていることは、このようなものです次のようなコードでネストされたメッセージ（anotherMessage）：

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

ただし、messageにアクセスできます。

私は間違いを犯したアイデアか、全体のコンセプトで何かを逃している可能性がありますか？

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

レフリー：そのため

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