React-intl使用json樹格式

Question

我在項目中使用react-intl，並且以任何語言加載json文件，但我需要json文件具有樹格式。 當我加載我的組件時，react-intl打印json的密鑰字符串。 例如：

{ 
 "header":{
  "title": "My title",
  "text": "My text"
 },
 "footer":{
  "title": "My title",
  "text": "My text"
 } 
}

當我使用時：

<p><FormattedMessage id="header.title"/></p>

結果是： <p>header.title</p>

任何想法？

Answer 1

我找到了官方文檔的扁平化消息對象

function flattenMessages(nestedMessages, prefix = '') {
 return Object.keys(nestedMessages).reduce((messages, key) => {
    let value       = nestedMessages[key];
    let prefixedKey = prefix ? `${prefix}.${key}` : key;

    if (typeof value === 'string') {
        messages[prefixedKey] = value;
    } else {
        Object.assign(messages, flattenMessages(value, prefixedKey));
    }

    return messages;
 }, {});
}

let messages = flattenMessages(nestedMessages);

Answer 2

如果要在沒有“ Flatten messages Object”的情況下執行此操作，則可以使用FormattedMessage，如下所示：

<FormattedMessage id="header">
  {txt => <span>{txt[title]}</span>}
</FormattedMessage>

結果將是：“我的標題”

或當然：

<FormattedMessage id="footer">
  {txt => <span>{txt[text]}</span>}
</FormattedMessage>

結果將是：“我的文字”