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

В настоящее время я работаю над веб-сайтом, который считывает данные из двух файлов 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 или мне нужно реализовать это иначе?


reactjs javascript react-intl
person stefan0905    schedule 20.04.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете создать массив, в котором значения внутри ваших массивов являются ключами, а не фактическими строками, и пока вы их визуализируете, вы можете фактически перевести эти

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>

   ))
}
person Shubham Khatri    schedule 20.04.2020
comment
Большое спасибо за ваш ответ, но что именно вы подразумеваете под переводом во время рендеринга? И я должен хранить оба языка только в одном файле? - person stefan0905; 20.04.2020
comment
Я имею в виду, что в вашем файле для данных просто сохраните ключи для строк и добавьте эти ключи в любой файл верхнего уровня, который у вас есть, который вы передаете intlProvider - person Shubham Khatri; 20.04.2020
comment
Большое тебе спасибо - person stefan0905; 20.04.2020