Блог

На определенном шаге в компоненте React stepper я должен изменить каталог на основе языка шагов. К сожалению, на одном из шагов текст жестко закодирован в изображения, что требует от меня внесения этого изменения. Приложение использует i18next для локализации.

В настоящее время все изображения для этого шага отображаются с помощью этого кода:

 return sectionItems.map((el, i) => {
      const disabled =
        el.meta === null || !el.meta.disabled ? false : el.meta.disabled;
      return {
        item: {
          img:
            el.resource !== null ? require(`../../assets${el.resource}`) : logo,
          label: i18next.t(el.name),
          disabled,
        },
      };
    });

 

В нем есть элемент, window.localStorage.i18nextLng который возвращает ключ «es» для испанского языка.

Я попытался создать условный оператор, который считывал бы этот ключ, а затем возвращал каталог на основе языка:

 const getImages = (sectionItems) => {
  debugger;
  if (window.localStorage.getItem.i18nextLng === 'es') {
    return sectionItems.map((el, i) => {
      const disabled =
        el.meta === null || !el.meta.disabled ? false : el.meta.disabled;
      return {
        item: {
          img:
            el.resource !== null amp;amp;
            window.localStorage.getItem.i8nextLng === 'en'
              ? require(`../../assets/en${el.resource}`)
              : logo,
          label: i18next.t(el.name),
          disabled,
        },
      };
    });
  } else {
    return sectionItems.map((el, i) => {
      const disabled =
        el.meta === null || !el.meta.disabled ? false : el.meta.disabled;
      return {
        item: {
          img:
            el.resource !== null ? require(`../../assets${el.resource}`) : logo,
          label: i18next.t(el.name),
          disabled,
        },
      };
    });
  }
};
 

Все остальные шаги отображаются правильно с текущей структурой. Однако я не могу получить изображения из папки es для сопоставления.

 src
  |_assets
      |_images
      |_ en
        |_images
 

Как я могу изменить свой каталог на основе этого ключа или есть ли способ объединить расположение папки в пути к исходному коду, который обеспечивал бы гибкость для более чем одного языка? Есть ли лучший способ справиться с этим сценарием с помощью i18next? Заранее спасибо за любую помощь.

Я боюсь, что Webpack по умолчанию (и в CRA) не позволит создавать динамический путь импорта. Кроме того, вы не должны смешивать CommonJS и ES6 (использовать import вместо require ).

Вам нужно будет явно определить эти ресурсы. Вы можете использовать отложенную оценку, чтобы уменьшить размер всего пакета (чтобы один пакет не содержал все языковые данные).

 const resources = {
  en: {
    Logo: () => import('../../assets/en/Logo'),
  },
  es: {
    Logo: () => import('../../assets/es/Logo'),
  },
};
 

Вы также можете создавать модули, содержащие компоненты / ресурсы для определенного языка, и динамически импортировать эти модули.

assets/en.js

 import Logo from './en/Logo';

export default {
  Logo,
};
 

assets/es.js

 import Logo from './es/Logo';

export default {
  Logo,
};
 

LocalComponentsProvider.js

 const resources = {
  en: () => import('../../assets/en'),
  es: () => import('../../assets/es'),
};