如何将HTTP服务器托管的外部React组件集成到React应用？

一、先搞定外部组件的打包配置 #

要让外部React组件能被动态加载，首先得把它打包成全局可访问的UMD格式，不能用普通ES模块（跨域加载ES模块存在兼容性和CORS配置的额外问题）。

以Vite为例，修改vite.config.js：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    lib: {
      entry: 'src/MyPluginComponent.jsx', // 你的组件入口文件
      name: 'MyExternalReactComponent', // 全局变量名，宿主应用将通过这个获取组件
      formats: ['umd'],
      fileName: () => 'plugin.js'
    },
    rollupOptions: {
      // 排除React和ReactDOM，让宿主应用提供依赖，避免重复打包导致版本冲突
      external: ['react', 'react-dom'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM'
        }
      }
    }
  }
});

打包后把生成的plugin.js放到你的HTTP服务器（比如http://example.com/plugin.js）上。

二、宿主React应用的动态加载实现 #

宿主应用需要动态加载外部脚本，获取全局变量中的组件后再渲染。可以写一个自定义Hook封装这个逻辑：

import { useState, useEffect } from 'react';

function useExternalComponent(url, globalVarName) {
  const [Component, setComponent] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 先检查脚本是否已加载过
    if (window[globalVarName]) {
      setComponent(window[globalVarName]);
      setLoading(false);
      return;
    }

    const script = document.createElement('script');
    script.src = url;
    script.async = true;

    const handleLoad = () => {
      if (window[globalVarName]) {
        setComponent(window[globalVarName]);
        setLoading(false);
      } else {
        setError(new Error('外部组件未正确暴露全局变量'));
        setLoading(false);
      }
    };

    const handleError = () => {
      setError(new Error('加载外部组件失败'));
      setLoading(false);
    };

    script.addEventListener('load', handleLoad);
    script.addEventListener('error', handleError);

    document.body.appendChild(script);

    // 清理函数
    return () => {
      script.removeEventListener('load', handleLoad);
      script.removeEventListener('error', handleError);
      document.body.removeChild(script);
    };
  }, [url, globalVarName]);

  return { Component, loading, error };
}

然后在宿主组件中使用这个Hook：

function App() {
  const { Component: MyPlugin, loading, error } = useExternalComponent(
    'http://example.com/plugin.js',
    'MyExternalReactComponent'
  );

  if (loading) return <div>加载插件中...</div>;
  if (error) return <div>插件加载失败：{error.message}</div>;

  return (
    <div className="App">
      <h1>宿主应用</h1>
      {/* 渲染外部组件，可正常传递props */}
      <MyPlugin title="外部组件示例" />
    </div>
  );
}

export default App;

三、常见问题解决 #

• 跨域错误：确保外部HTTP服务器配置了CORS，允许宿主应用的域名访问。比如在Nginx中添加add_header Access-Control-Allow-Origin "你的宿主域名";
• React版本冲突：外部组件打包时必须通过external排除React/ReactDOM，让宿主提供依赖，否则会出现双React实例导致的hooks报错。
• 脚本重复加载：Hook中已做全局变量检查，避免重复加载同一脚本。若需加载多个插件，可扩展缓存逻辑。
• 类型提示：如果需要TS类型支持，可在宿主应用中定义外部组件的Props类型。

内容的提问来源于stack exchange，提问作者Zakaria