如何将React应用导入现有HTML项目？React新手求助

问题分析 #

你尝试两种嵌入方式均报错，具体原因如下：

1. 引入build产物时出现ReferenceError: google is not defined：你的React项目中Map组件依赖Google Maps，但宿主HTML未提前加载Google Maps脚本，导致React代码执行时找不到全局google对象。
2. 内联引入源码时出现Cannot read properties of undefined (reading 'render')：一是React 16.8的UMD版本在ES模块（data-type="module"）环境下，全局ReactDOM无法被模块内代码访问；二是@material-ui/core这类npm包无法通过Babel Standalone直接解析，它不支持处理npm模块的导入逻辑。

解决方案 #

方法一：修复build产物的引入（推荐生产环境使用） #

这是最稳定的嵌入方式，步骤如下：

1. 提前加载Google Maps脚本：在引入React build的JS文件前，添加Google Maps CDN脚本（替换为你的API密钥）：

<script src="https://maps.googleapis.com/maps/api/js?key=你的Google Maps API密钥&libraries=places" defer></script>

2. 引入React build的CSS资源：Material-UI的样式依赖build生成的CSS文件，需一并引入（替换为你实际生成的CSS文件名）：

<link rel="stylesheet" href="./../react/build/static/css/main.xxxxxx.css" />

3. 最终宿主HTML结构：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../css/body.css" />
    <!-- 引入React build的样式文件 -->
    <link rel="stylesheet" href="./../react/build/static/css/main.xxxxxx.css" />
    <!-- 提前加载Google Maps依赖 -->
    <script src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&libraries=places" defer></script>
    <script type="module" defer src="../js/index.js"></script>
  </head>
  <body>
    <div id="findHospital"></div>
    <!-- 引入React build的JS文件 -->
    <script defer src="./../react/build/static/js/main.da7f74d5.js"></script>
  </body>
</html>

注意：务必替换main.xxxxxx.css为你build生成的实际文件名，以及填写有效的Google Maps API密钥。

方法二：调整内联引入方式（仅用于本地调试） #

若需直接引入源码调试，需解决依赖和全局变量问题：

1. 移除data-type="module"属性：UMD版本的React/ReactDOM挂载在全局，模块环境下无法直接访问全局变量。
2. 通过CDN引入Material-UI依赖：在React脚本前添加Material-UI的CDN链接：

<script src="https://unpkg.com/@material-ui/core@4.12.4/umd/material-ui.production.min.js"></script>

3. 修改React源码的导入逻辑：将npm包导入改为全局变量调用，例如app.js中的导入：

// 替换原import语句
const { CssBaseline, Grid } = MaterialUI;

4. 修正index.js的ReactDOM调用：直接使用全局变量，移除import语句：

ReactDOM.render(<App />, document.querySelector("#findHospital"));

此方式需修改大量源码，且依赖CDN版本与原项目一致，仅适合临时调试，不推荐生产环境使用。

额外提示 #

• 确保React项目package.json中homepage字段设置为"./"，这样build生成的资源路径为相对路径，避免出现404错误。
• 若getPlaceData函数依赖外部API，需确保宿主环境能正常访问该API，或在React项目中提前处理跨域问题。

内容的提问来源于stack exchange，提问作者minh chanh le