javascript - Javascript：用闭包概括反应可加载

Question

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

const Home = Loadable({
    loader: () =>
        import ('./views/home'),
    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);

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

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