React-Intl：I18n 与数组

Question

我目前在一个网站上工作，该网站从两个 json 文件（de.json 和 en.json）中读取数据。现在还有一个页面，我需要根据选择的语言从英语数组或德语数组中读取数据（每个数组当前是一个简单的 js 文件，其中只有数组，它只是被导入我需要读取其数据的文件）。它现在的工作方式是由我检查语言环境是否为英语然后使用该数组，但是该解决方案并不干净。

const ResourcesMedia = [
    {
        title: 'sometitle',
        description: 'somedescription',
        href: 'somelink'
    },
    {
        title: 'sometitle',
        description: 'somedescription',
        href: 'somelink'
    }
  ]

export default ResourcesMedia;

还有另一个类似的数组仅适用于德语版本。现在根据选择的语言，我正在映射数组并创建组件。但是，目前我正在检查语言环境是什么样的：

const mediaArray = locale === 'en' ? ResourcesMediaEn : ResourcesMedia

这不是最好的方法，我想将数组存储在 en.json 和 de.json 文件（或两个新文件）中，让 IntlProvider 决定它应该使用。是否有使用 React-Intl 的好方法，或者我是否需要以其他方式实现它？

Answer 1

您可以创建一个数组，其中数组中的值是键而不是实际的字符串，并且在呈现它们时您可以实际翻译这些

const ResourcesMedia = [
    {
        title: 'sometitleKey',
        description: 'somedescriptionKey',
        href: 'somelink'
    },
    {
        title: 'sometitleKey1',
        description: 'somedescriptionKey',
        href: 'somelink'
    }
  ]


render() {
   const {intl: {formatMessage: t}} = this.props;
   return ResourcesMedia.map(item => (
       <div>
          <div>{t(item.title)</div>
          <div>{t(item.description)</div>
       <div>

   ))
}

React-Intl：I18n 与数组

React-Intl: I18n with arrays

javascript

reactjs

react-intl