Reactjs使用默认导出函数动态导入js文件

Question

我在MyApp组件中有一个reactjs应用程序，我在顶部使用了一个导入，如下所示：

import { ProvideAuth } from "util/auth.js"; 

在内部，这个文件util/auth.js有以下代码(我在顶部导入另一个js文件，如下所示)：

import analytics from "./analytics";

export function ProvideAuth({ children }) {
  .....
}

如何根据cookie值动态地从“./ analytics”导入分析？我做了这段代码，但它不起作用：

function loadLazyModule() {
  console.log("loadLazyModule");
  const _module = React.lazy(() =>
    import("./analytics.js")
  );
  return _module;
}

// Provider hook that creates auth object and handles state
export function ProvideAuth({ children }) {
  if (statisticsCookie == 'Y') {
    console.log("statisticsCookie", statisticsCookie);
    loadLazyModule();
  }
 .....
}

最后，我的analytics.js有以下代码：

// Initialize analytics and plugins
// Documentation: https://getanalytics.io
const analytics = Analytics({
  debug: process.env.NODE_ENV !== "production",
  plugins: [
    googleAnalyticsPlugin({
      trackingId: process.env.NEXT_PUBLIC_GA_TRACKING_ID,
    }),
  ],
});
....

export default analytics;

只有在启用了cookie (值‘Y’)时，我才需要导入该文件：

import analytics from "./analytics";

请救救我！谢谢!

Answer 1

你可以这样做。还可以在此之后使用.than().catch()函数。

async function load() {
let say = await import('./say.js');
say.hi(); // Hello!
say.bye(); // Bye!
say.default(); // Module loaded (export default)!

}

或通过导入模块

 let modulePath = prompt("Which module to load?");
 import(modulePath)
 .then(obj => <module object>)
 .catch(err => <loading error,e.g. if no such module>)

这里描述的是https://javascript.info/modules-dynamic-imports