在反应中动态导入模块

Posted 2023-03-16

【中文标题】在反应中动态导入模块

【英文标题】：Dynamically import a module in react

【发布时间】：2020-07-18 11:54:54

【问题描述】：

我有一个基本的反应应用程序，它必须动态嵌入其他反应应用程序。例如

App1（基础应用） --> App2（子app1） --> App3（子app2）

App2 和 App3 是独立构建的 React 应用程序。 我需要一种将这些应用程序动态导入 App1 的方法。 我这样做的一种方法是将构建的 js 和 CSS 文件添加到节点模块中的相应文件夹中（请参阅文件结构的链接）

我正在尝试在 App1 中动态导入 app2 和 app3，

let path = `../../node-modules/$application.title/build/$application.title`
    let pathCss = `../../node-modules/$application.title/build/$application.title.css`
    import('' + pathCss)
    .then(component =>
    console.log('css file loaded', component)
    ).catch(error => 
    console.error(`"$application.title" not yet supported $error`);
    );
        
    import('' + path)
    .then(component =>
    this.setState(
    routeComponents: this.state.routeComponents.concat(component.App)
    )
    )
    .catch(error => 
        console.error(`"$application.title" not yet supported $error`);
    );
    

但这似乎没有找到应用程序，并给出了无法加载 src 文件夹之外的模块的错误。 关于如何实现这一点的任何建议？

【问题讨论】：

这行得通吗：***.com/a/58931464/11380693 ?

发布没问题，我们可以将repo发布到存储库。但是，动态加载不起作用。我正在尝试动态加载我的componentDidMount中的组件。这里不允许引用 src 文件夹之外的任何内容

不能引用 src 文件夹外的任何东西的原因是因为它是 create-react-app 的特殊限制。它在 ModuleScopePlugin 中实现，以确保文件驻留在 src 文件夹中

有没有其他方法可以动态导入打包在node-modules中的模块？

【参考方案1】：

看看这个解决方案https://codesandbox.io/s/busy-elgamal-l6po2

您可以看到Loading 组件在获取App1 组件时被渲染。

import React,  useState, useEffect  from "react";
import "./styles.css";

function Loading() 
  return <div>Loading</div>;


export default function App() 
  const [comp, setComp] = useState(Loading);

  useEffect(() => 
    const load = async () => 
      const App1 = (await import("./App1")).default;
      setComp(App1);
    ;

    load();
  , []);

  return <>comp</>;