Javascript：使用闭包概括react-loadable

Question

我正在使用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');

我想念什么吗？ 谢谢。

Answer 1

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

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

您可能会注意到，我没有做任何特别的事情，只是将路径分为两部分。 第一条路径在导入调用中进行了硬编码。

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