如何不使用Iframe将React测验应用嵌入到指定尺寸DIV中

一、调整React应用的打包配置（适配嵌入场景） #

直接使用默认npm run build的产物无法灵活指定挂载节点，需要修改打包配置输出UMD格式，并提供外部可调用的初始化函数：

1. 适配Create React App项目（需用craco修改配置）

   • 安装craco：npm install @craco/craco --save-dev
   • 在项目根目录创建craco.config.js，配置UMD输出：

     module.exports = {
       webpack: {
         configure: (webpackConfig) => {
           webpackConfig.output = {
             ...webpackConfig.output,
             library: 'QuizTwiz',
             libraryTarget: 'umd',
             globalObject: 'this'
           };
           return webpackConfig;
         }
       }
     };
     

   • 修改package.json的build命令：将"build": "react-scripts build"改为"build": "craco build"

2. 修改应用入口文件（支持指定挂载节点）
   打开src/index.js，替换原有挂载逻辑为可外部调用的初始化函数：

   import React from 'react';
   import ReactDOM from 'react-dom/client';
   import './index.css';
   import App from './App';
   
   // 导出初始化函数，允许外部传入挂载容器
   window.initQuizTwiz = (container) => {
     const root = ReactDOM.createRoot(container);
     root.render(
       <React.StrictMode>
         <App />
       </React.StrictMode>
     );
   };
   
   // 本地开发时仍自动挂载到#root
   if (process.env.NODE_ENV === 'development') {
     const devRoot = document.getElementById('root');
     devRoot && initQuizTwiz(devRoot);
   }
   

3. 重新打包应用：执行npm run build，生成适配后的产物文件。

二、在目标网站中嵌入并初始化 #

1. 添加指定尺寸的容器DIV：

   <div id="quiz-container" style="width:300px;height:600px;overflow:auto;"></div>
   

2. 引入打包后的CSS和JS文件：

   <!-- 替换为实际的文件路径 -->
   <link rel="stylesheet" href="/path/to/your/build/static/css/main.[hash].css">
   <script src="/path/to/your/build/static/js/main.[hash].js"></script>
   

3. 初始化测验应用：

   <script>
     window.addEventListener('load', () => {
       const container = document.getElementById('quiz-container');
       // 确保初始化函数存在且容器有效
       if (window.initQuizTwiz && container) {
         window.initQuizTwiz(container);
       }
     });
   </script>
   

三、常见问题排查 #

• 路径错误：确认CSS/JS文件的引入路径正确，目标网站能正常访问这些资源。
• 样式冲突：若目标网站样式干扰测验应用，可给应用根组件添加CSS隔离（比如使用CSS Modules、styled-components的全局隔离方案）。
• 全局变量冲突：如果QuizTwiz全局名称和目标网站冲突，修改craco.config.js中的library值为其他唯一名称。

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