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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 601 天前的主题，其中的信息可能已经有所发展或是发生改变。

我期望在运行的 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); }); }

React

组件

加载

12 条回复 2024-05-14 15:38:12 +08:00

LuckyLauncher

2024-05-14 10:22:52 +08:00

都用 module 了，直接 import 呢

LuckyLauncher

2024-05-14 10:24:16 +08:00

import(url).then(m => m.default).then(compOnent=> {// 后续处理})

lisongeee

2024-05-14 10:25:01 +08:00

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