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

Question

在 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 &&
            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'),
};