React初学： Uncaught Error: createRoot(...): Target container is not a DOM element.

最新推荐文章于 2023-09-19 21:29:15 发布

arannatao

最新推荐文章于 2023-09-19 21:29:15 发布

阅读量3.1k

点赞数

分类专栏：菜鸟小记文章标签： react.js 前端

本文链接：https://blog.csdn.net/arannatao/article/details/125891858

版权

菜鸟小记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在练习官网案例时，使用create-react-app创建项目后，删除src下所有文件，新建了index.html、index.css、index.js。其中：

index.html：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
    </head>
    <body>
        <div id="container"></div>
    </body>
</html>

index.js：

const root = ReactDOM.createRoot(document.getElementById("container"));
//const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<FilterableProductTable products={PRODUCTS} />);

当使用getElementById("hello")时报错：react-dom.development.js:29345 Uncaught Error: createRoot(...): Target container is not a DOM element.

当使用getElementById("root")时正常。

网上该报错原因多是getElementById中参数填写错误，与html中的id不一致。不过本次id均一致填写了"container"。

后在新项目中发现默认index.html文件应在public目录下，而非src目录下，默认index.html中有root节点，所以当使用getElementById("root")时正常。

解决方法：将自己编写的index.html放到public目录下。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

arannatao

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
React初学： Uncaught Error: createRoot(...): Target container is not a DOM element.

React初学： Uncaught Error: createRoot(...): Target container is not a DOM element.
复制链接

扫一扫