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);

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

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

Javascript：使用闭包概括react-loadable

1 个答案: