在前端开发中，我们有时会遇到这样的错误提示：“Uncaught ReferenceError: ReactDOM is not defined”。这个错误通常出现在使用 React 库时，意味着 ReactDOM 对象没有被定义。本文将介绍这个错误的原因，并提供解决方法和示例代码。
错误原因
在使用 React 库时，如果没有正确引入 ReactDOM 对象，就会出现“Uncaught ReferenceError: ReactDOM is not defined”错误。这个错误通常是由以下原因导致的：
- 没有正确引入 ReactDOM 对象。
- 引入了 React 库但没有引入 ReactDOM 库。
- 在组件中使用了 ReactDOM.render() 方法，但没有正确引入 ReactDOM 对象。
解决方法
要解决这个错误，需要确保正确引入 ReactDOM 对象，具体步骤如下：
- 在 HTML 文件中引入 React 和 ReactDOM 库：
<script src="https://unpkg.com/react@16.14.0/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@16.14.0/umd/react-dom.production.min.js"></script>
- 确保在 JavaScript 文件中正确引入 ReactDOM 对象：
import ReactDOM from 'react-dom';
或者
const ReactDOM = require('react-dom');
- 如果你正在使用 CDN，则需要确认版本号是否正确。一些 CDN 上可能会缺少 ReactDOM 库或使用了过期的版本。
示例代码
下面是一个简单的 React 组件，它使用了 ReactDOM.render() 方法。如果没有正确引入 ReactDOM 对象，就会出现“Uncaught ReferenceError: ReactDOM is not defined”错误。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ------------ ----- ----------- ------- --------------- - -------- - ------ ----------- ------------- - - ---------------------------- --- ---------------------------------展开代码
在这个例子中，如果你没有正确引入 ReactDOM 对象，就会看到控制台中出现“Uncaught ReferenceError: ReactDOM is not defined”错误。确保按照上述步骤正确引入 ReactDOM 对象后，这个组件应该能够正常工作。
总结
在前端开发中，使用 React 库时，可能会遇到“Uncaught ReferenceError: ReactDOM is not defined”错误。这个错误通常是由于没有正确引入 ReactDOM 对象导致的。为了避免这个错误，需要确保在 HTML 文件和 JavaScript 文件中正确引入 ReactDOM 对象，并验证 CDN 版本是否正确。通过这些步骤，你可以避免这个错误并顺利进行 React 开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31626
