如何在jQuery应用中引入并调用ReactJS开发的第三方组件？

你遇到的require is not defined报错是因为直接引用了npm安装的CommonJS格式React包，这类包依赖Node.js的模块加载机制，浏览器原生不支持require语法，无需引入requirejs，直接使用浏览器适配的UMD格式React脚本即可。

基础依赖引入 #

无需通过npm安装，直接下载对应版本的UMD格式脚本到本地项目中，按顺序引入即可：

• React核心库：开发环境用react.development.js，生产环境换成react.production.min.js，提供React基础能力
• ReactDOM库：开发环境用react-dom.development.js，生产环境换成react-dom.production.min.js，提供React DOM渲染能力
• （可选）Babel standalone脚本：仅当你需要在HTML页面内直接写JSX语法时引入，不需要可忽略

引入示例：

<script src="./你的本地脚本路径/react.development.js"></script>
<script src="./你的本地脚本路径/react-dom.development.js"></script>
<!-- 不需要写JSX就删掉下面这行 -->
<script src="./你的本地脚本路径/babel.min.js"></script>

第三方React组件引入 #

确保你使用的第三方React组件是UMD打包版本，引入后组件会挂载到window全局对象上，可以直接调用。如果组件仅提供npm包，可自行将其打包为UMD格式后引入。

具体调用示例 #

1. 先在页面中添加组件挂载容器 #

<div id="react-component-container"></div>

2. 在jQuery逻辑中渲染组件 #

$(function() {
  const container = document.getElementById('react-component-container');
  // React 18 版本渲染写法
  const root = ReactDOM.createRoot(container);
  // 渲染第三方组件，假设组件全局名为ThirdPartyReactComponent，按需求传入参数即可
  root.render(React.createElement(ThirdPartyReactComponent, {
    参数1: '对应值',
    参数2: '对应值',
    // 接收组件回调事件
    on事件名: function(返回数据) {
      // 这里可直接编写你的jQuery业务逻辑
    }
  }));

  // 如果你用的是React 17及更早版本，用下面的写法替代上面的渲染逻辑
  // ReactDOM.render(
  //   React.createElement(ThirdPartyReactComponent, { 参数1: '对应值' }),
  //   container
  // );
})

注意事项 #

• 不需要写JSX的场景不要引入Babel脚本，会降低页面加载性能，直接使用React.createElement语法即可满足需求
• 卸载组件可调用root.unmount()（React 18）或ReactDOM.unmountComponentAtNode(container)（React 17及更早版本）
• 确保React、ReactDOM、第三方React组件的大版本一致，避免版本不兼容导致的报错

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