时间戳

首页 > 解决方案 > Reactjs 使用默认导出功能动态导入 js 文件

reactjs - Reactjs 使用默认导出功能动态导入 js 文件

问题描述

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

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

请帮帮我！谢谢！

标签： reactjs

解决方案

你可以这样做。之后你也可以使用 .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

推荐阅读