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

我找到官方doc

的Flatten messages Object

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>

结果将是："My title"

或者当然：

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

结果将是："My Text"

React-intl 使用 json 树格式

React-intl use json tree format

javascript

json

internationalization

reactjs

react-intl