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>

   ))

}