React-Intl: I18n с массивами

Question

В настоящее время я работаю над сайтом, который считывает свои данные из двух json файлов (de. json и en. json). Теперь есть страница, на которой мне нужно прочитать данные либо из массива engli sh, либо из немецкого массива в зависимости от того, какой язык выбран (каждый массив в настоящее время представляет собой простой файл js, содержащий только массив внутри него и он просто импортируется в файл, где мне нужно прочитать его данные). Сейчас он работает, проверяя, является ли локаль engli sh, и затем использую этот массив, однако это решение не является чистым.

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>

   ))
}