根据本地存储项更改本地化目录

Question

在 React 步进器组件的特定步骤中，我必须根据步骤语言更改目录。不幸的是，在其中一个步骤中，文本被硬编码到图像中，这需要我进行此更改。该应用程序使用 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 中有一项 return 是西班牙语的“es”键。

我尝试创建一个条件语句来读取此键，然后 return 基于语言的目录：

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 &&
            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 处理这种情况？在此先感谢您的帮助。

Answer 1

恐怕默认情况下（在 CRA 中）Webpack 不允许创建动态导入路径。此外，你不应该混合使用 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'),
};

根据本地存储项更改本地化目录

Change localization directory base on local storage item

javascript

reactjs

directory

i18next

react-i18next