如何从HTML/JS页面向React组件传值？遇ReactDOM未定义错误

出现这个错误是因为你的打包产物（bundle.js）没有将React、ReactDOM以及Main组件暴露到全局作用域，导致HTML中的脚本无法访问这些变量。以下是几种可行的解决方法：

方法一：在打包配置中暴露全局变量 #

如果使用Webpack作为打包工具，可以通过配置让指定模块暴露到全局：

1. 安装依赖（若需要）：

   npm install expose-loader --save-dev
   

2. 修改Webpack规则：
   在module.rules中添加规则，将React、ReactDOM暴露到全局：

   module.exports = {
     module: {
       rules: [
         {
           test: require.resolve('react'),
           loader: 'expose-loader',
           options: { exposes: { globalName: 'React', override: true } }
         },
         {
           test: require.resolve('react-dom'),
           loader: 'expose-loader',
           options: { exposes: { globalName: 'ReactDOM', override: true } }
         }
       ]
     }
   };
   

3. 暴露Main组件到全局：
   在Webpack的output中添加library配置，让打包后的组件挂载到window对象：

   module.exports = {
     output: {
       library: 'Main',
       libraryTarget: 'window'
     }
   };
   

   重新打包后，HTML脚本就能直接访问React、ReactDOM和Main了。

方法二：在组件代码中手动挂载全局变量 #

如果不想修改打包配置，可以直接在Main组件的源码末尾添加代码，将需要的变量挂载到window对象上：

// Main.js 末尾添加
import React from 'react';
import ReactDOM from 'react-dom/client';

// ...你的组件核心代码

window.React = React;
window.ReactDOM = ReactDOM;
window.Main = Main;

重新打包后，HTML中的脚本就能访问这些全局变量了。

方法三：通过CDN引入React和ReactDOM（需注意版本兼容） #

在引入bundle.js之前，先通过CDN加载React和ReactDOM的UMD版本：

<!-- 开发环境版本 -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

<!-- 生产环境版本（可选） -->
<!-- <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script> -->
<!-- <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script> -->

<script src="Scripts/ParsedRequests/dist/bundle.js"></script>
<script>
  // 你的渲染代码
</script>

⚠️ 注意：要保证CDN版本与你项目中依赖的React版本完全一致，否则可能出现兼容性问题。

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