使用Ant Design开发应用时出现ReactDOM与mountNode未定义编译错误求解决

这两个no-undef编译错误都是典型的变量未声明/未导入问题，我来一步步帮你修复：

1. 修复'ReactDOM' is not defined错误 #

ReactDOM是React负责DOM渲染的核心模块，只要你用到它的渲染能力，就必须先在文件顶部导入：

• 如果你使用React 17及更早版本，添加这行导入：

  import ReactDOM from 'react-dom';
  

• 如果你升级到了React 18，则需要导入createRoot（这是React 18的新渲染API）：

  import { createRoot } from 'react-dom/client';
  

2. 修复'mountNode' is not defined错误 #

mountNode是用来指定React应用挂载到页面哪个DOM元素的变量，你需要先通过原生DOM API定义它。比如你的项目public/index.html里默认有个id为root的容器：

<!-- public/index.html 中的默认结构 -->
<div id="root"></div>

那就在App.js里添加这行代码定义mountNode：

const mountNode = document.getElementById('root');

修正后的完整代码示例 #

这里给你一个兼容React 18的完整示例（如果是React 17，把渲染部分换成ReactDOM.render(<App />, mountNode)即可）：

import React from 'react';
import { createRoot } from 'react-dom/client'; // React 18的导入方式
import { Button } from 'antd'; // 导入Ant Design组件

function App() {
  return (
    <div className="App">
      <Button type="primary">Hello Ant Design</Button>
    </div>
  );
}

// 定义挂载节点
const mountNode = document.getElementById('root');
// 渲染应用到指定节点
const root = createRoot(mountNode);
root.render(<App />);

额外检查点 #

• 确认你的public/index.html里确实存在对应的DOM容器（比如id为root的div），如果容器id不同，要同步修改getElementById的参数。
• 如果你用Create React App初始化项目，默认的挂载节点就是id="root"，无需额外修改HTML。

这样调整后，重新启动或构建项目，这两个编译错误应该就能完全消失了~

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