代码之家 › 专栏 › 技术社区 › mdmb

react intl-访问嵌套消息

react-intl reactjs javascript

mdmb · 技术社区 · 8 年前

我正在尝试使用 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 组件I无法访问嵌套消息( anotherMessage

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

但是 message 是可访问的。

3 回复 | 直到 8 年前

smac89 4 年前

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

参考文献:

Camilo 5 年前

react-intl 不再支持嵌套消息。如果您仍然希望以这种方式组织邮件,可以使用 flat

import flatten from 'flat'

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

声称仅支持平面消息结构的主要原因是:

简单性和灵活性是主要原因。使用平面对象,人们可以编写他们想要的任何消息ID/KEY,并且不会用特殊的语义来解释它们。

查看问题 Support nested messages-object 对GitHub发表评论。

Krupal Patel 8 年前

扁平化消息 是我找到的最好的方法。

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前