JavaScript中的条件导入或替代(ReactJS WebApp）

Conditional import or alternative in JavaScript (ReactJS WebApp)?

本文关键字：ReactJS WebApp 条件 导入 JavaScript      更新时间：2023-09-26

我正在为ReactJS Web应用程序实现国际化。如何避免加载所有语言文件？

import ru from './ru';
import en from './en';
// next lines are not important for this question from here
import locale from 'locale';
const supported = new locale.Locales(["en", "ru"])
let language = 'ru';
const acceptableLanguages = {
    ru: ru,
    en: en,
}
if (typeof window !== 'undefined') {
    const browserLanguage = window.navigator.userLanguage || window.navigator.language;
    const locales = new locale.Locales(browserLanguage)
    language = locales.best(supported).code
}
// till here
// and here i'm returning a static object, containing all language variables
const chooseLang = () => {
    return acceptableLanguages[language];
}
const lang = chooseLang();
export default lang;

不幸的是，没有办法在ES6中动态加载模块。

即将推出的HTML Loader Spec将允许此功能，因此您可以使用polyfill来使用它。

const chooseLang = () => System.import(`./${language}`);
export default chooseLang;

然而，这将是基于承诺的，因此需要这样称呼：

import language from "./language";
language.chooseLang().then(l => {
    console.log(l);
});

但请记住，该规范可能会发生根本性的变化（或者完全取消）。

另一种选择是不将本地化存储为Javascript模块，而是存储为JSON，例如

en.json

{ "hello_string": "Hi!" }

language.js

const chooseLang = () => {
    return fetch(`./${language}.json`)
        .then(response => response.json());
};

同样，这将是基于承诺的，因此需要这样访问：

import language from "./language";
language.chooseLang().then(l => {
    console.log(l.hello_string);
});

该解决方案将完全符合ES6，并且不会依赖于未来可能的功能。

看起来我来晚了，但我想回答我正在使用的方法。我有一个异步组件：

import React from 'react';
export default (loader, collection) => (
  class AsyncComponent extends React.Component {
    constructor(props) {
      super(props);
      this.Component = null;
      this.state = { Component: AsyncComponent.Component };
    }
    componentWillMount() {
      if (!this.state.Component) {
        loader().then((Component) => {
          AsyncComponent.Component = Component;
          this.setState({ Component });
        });
      }
    }
    render() {
      if (this.state.Component) {
        return (
          <this.state.Component { ...this.props } { ...collection } />
        )
      }
      return null;
    }
  }
);

我们称之为使用：

const page1 = asyncComponent(() => import('./page1')
  .then(module => module.default), { name: 'page1' });

然后我们将其与一起使用

  <Route path='/page1' component= {page1}/>

这将确保加载是动态完成的。

看看react可加载包——如果你能以某种方式将语言文件封装到组件中，这可能会解决你的问题。

相关文章：