如何以模块形式导入ReactJS？解决导入报错及组件继承问题

你的问题根源在于React的.js生产包是UMD格式，而非ES模块，直接用ES模块语法导入会导致导出匹配错误，或者无法获取正确的React类成员。下面是两种可行的解决方法：

方法一：使用React的ES模块版本文件 #

React官方提供了ES模块格式的生产文件（后缀为.mjs），这类文件专门适配ES模块导入语法：

1. 确保你本地有react.production.min.mjs和react-dom.production.min.mjs（如果需要渲染到DOM）
2. 在app.js中按如下方式导入：

   import React from './react.production.min.mjs';
   import ReactDOM from './react-dom.production.min.mjs';
   
   // 正常定义组件
   class MyComponent extends React.Component {
     render() {
       return React.createElement('div', null, 'Hello React');
     }
   }
   
   // 渲染组件（如果需要）
   ReactDOM.render(React.createElement(MyComponent), document.getElementById('root'));
   

这种方式能直接通过ES模块语法获取完整的React对象，不会出现导出或继承错误。

方法二：通过全局变量使用UMD版本的React #

如果只能使用.js后缀的UMD包，可先通过普通<script>标签将React挂载到全局，再在模块中引用全局变量：

1. 在HTML中调整脚本引入顺序：

   <!-- 先引入UMD格式的React，挂载到window全局 -->
   <script src="./react.production.min.js"></script>
   <script src="./react-dom.production.min.js"></script>
   <!-- 再引入你的模块脚本 -->
   <script type="module" src="./app.js"></script>
   

2. 在app.js中声明使用全局的React对象：

   // 从window全局获取React和ReactDOM
   const React = window.React;
   const ReactDOM = window.ReactDOM;
   
   class MyComponent extends React.Component {
     render() {
       return React.createElement('p', null, '组件内容');
     }
   }
   
   ReactDOM.render(React.createElement(MyComponent), document.getElementById('app'));
   

ES模块默认隔离作用域，因此需要显式从window中获取全局挂载的React对象，这样就能正常继承React.Component。

错误原因说明 #

• 第一个报错：react.production.min.js是UMD模块，没有ES模块的default导出，所以import React from './react.production.min.js'会找不到对应导出。
• 第二个报错：用import * as React导入UMD模块时，得到的是一个空的模块对象（UMD模块不按ES模块规则导出成员），因此React.Component为undefined，导致继承失败。

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