V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
DAGU1182810784
V2EX  ›  程序员

如何从网络中加载 React 组件并渲染它?想不到更好的办法了

  •  
  •   DAGU1182810784 ·
    xiaopujun · 193 天前 · 2008 次点击
    这是一个创建于 193 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我期望在运行的 React 程序中,通过网络加载 React 组件并使用。有什么可行的方案嘛?

    比如我自己运行了一个 React 应用 A ,然后其他人开发了一个 React 组件 B ,组件 B 通过 webpack 或 vite 打包后编译成了纯 js (可能有使用 esmodule )并放在了服务器上的某个位置。 现在,我在应用 A 中直接使用网络请求组件 B ,我希望能拿到 B 中导出的模块,并可以持有它,以决定在合适的时候渲染 B 组件。

    要达到这样的效果,有什么可行的方案嘛?

    我使用这种方式,但是感觉并不优雅,重要的是它加载之后就立即在模块作用域内执行了,我并不能直接持有 B 组件的导出,进而无法在合适的时候使用 B

    
    function loadRemoteModule(url: string) {
        return new Promise((resolve, reject) => {
            const script = document.createElement('script');
            script.src = url;
            script.type = 'module';
            script.onload = () => {
                // 模块加载成功
                resolve(null);
            };
            script.onerror = () => {
                // 模块加载失败
                reject(new Error(`Failed to load module from ${url}`));
            };
            document.head.appendChild(script);
        });
    }
    
    
    12 条回复    2024-05-14 15:38:12 +08:00
    LuckyLauncher
        1
    LuckyLauncher  
       193 天前
    都用 module 了,直接 import 呢
    LuckyLauncher
        2
    LuckyLauncher  
       193 天前
    import(url).then(m => m.default).then(component => {// 后续处理})
    lisongeee
        3
    lisongeee  
       193 天前
    // esm
    async function loadRemoteModule(url: string) {
    return await import(url).then(mod=>mod.default)
    }

    // iife/umd
    async function loadRemoteModule(url: string, exportGetter:()=>any) {
    return await new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = url;
    script.onload = () => {
    resolve(exportGetter());
    document.head.removeChild(script)
    };
    script.onerror = () => {
    // 模块加载失败
    reject(new Error(`Failed to load script from ${url}`));
    document.head.removeChild(script)
    };
    document.head.appendChild(script);
    });
    }
    zhtyytg
        4
    zhtyytg  
       193 天前
    模块联邦?
    gkinxin
        5
    gkinxin  
       193 天前   ❤️ 1
    https://helmicro.com/hel/
    可以试试这个
    youyouzi
        6
    youyouzi  
       193 天前
    联邦模块
    DOLLOR
        8
    DOLLOR  
       193 天前
    “react 组件”本质不就是一个 function 吗?
    你让他们 export 那个 function ,你这边 import 进来,再在你的 jsx 里渲染就好了。
    shenyu1996
        9
    shenyu1996  
       193 天前 via Android
    不考虑兼容性直接原生 es6 的 import 就可以 见 2 楼
    xu33
        10
    xu33  
       193 天前
    了解一下联邦模块
    DAGU1182810784
        11
    DAGU1182810784  
    OP
       193 天前
    好的,感谢各位的回复,这对我很有帮助
    unco020511
        12
    unco020511  
       192 天前
    二楼说了,import 远程模块即可
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2829 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 07:15 · PVG 15:15 · LAX 23:15 · JFK 02:15
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.