Javascript：用闭包概括反应可加载答案

【问题标题】：Javascript: generalizing react-loadable with closureJavascript：用闭包概括反应可加载
【发布时间】：2019-03-03 17:29:12
【问题描述】：

我正在使用 react-loadable 来加载视图。下面的代码工作正常：

const Home = Loadable({
    loader: () =>
        import ('./views/home'),
    loading: Loading,
});

但我有多个视图，因此我想通过用变量替换路径字符串来概括（重构）上述代码。 这就是问题开始的地方。我尝试了以下技术，但它没有加载目标视图，而是保留了 Loading 视图，这只是一个临时视图仅包含“正在加载...”字符串。

const getLoadableView = (viewPath) => {
  return Loadable({
    loader: ((p) => {
      const m = p;
      return () => {
        console.log(m); //this one prints the correct value
        return import(m);
      };
    })(viewPath),
    loading: Loading
  });
}
const Home = getLoadableView('./views/home');

我错过了什么吗？谢谢。

【问题讨论】：

getLoadableView 是否在创建 Home 的同一位置（模块）中声明？
你真的不需要m，也不需要p，也不需要那个IIFE。只需使用viewPath。
是的，两者都在同一个地方声明。我也试过没有局部变量，但没有运气。你能举个例子吗？
尝试.catch()ing 导入错误。另外，你在什么环境下运行这个？您使用转译器和/或捆绑器吗？是否支持动态导入？
它抛出的错误是：找不到模块'./views/home'。好像用'./views/home'替换导入调用中的变量m，它再次起作用....所以，导入调用中发生了一些奇怪的事情。

标签： javascript reactjs closures es6-promise react-loadable

【解决方案1】：

我通过以下技巧解决了这个问题：

const getLoadableView = (viewPath) => {
  return Loadable({
    loader: () => import(`./${viewPath}`);;
    })(viewPath),
    loading: Loading
  });
}
const homeViewPath = 'views/home';
const Home = getLoadableView(homeViewPath);

你可以注意到我没有做任何特别的事情，只是将路径分成两部分。第一个路径在 import 调用中是硬编码的。

显然这不是一个可靠的解决方案，但我找不到这种导入调用行为背后的实际原因。

【讨论】：