react 18 createRoot没有渲染出DOM元素

报错1

TypeError: Cannot read properties of undefined (reading
‘createElement’)

解决办法

//把import React from "react"修改为以下引用方式：
import * as React from "react";
1
2

报错2:

控制台无报错，但是createRoot没有渲染出DOM元素

createReact是把DOM元素渲染到index.html文件中的根元素下面，所以对应的解决办法如下：

检查body里面是否加上了根元素，如：

//...
<body>
	<div id="root"></div>
</body>
1
2
3
4

检查createReact引用的根元素是否正确，如：

const root = createRoot(document.getElementById("root"));
root.render(<h1>Hello world!</h1>);
1
2

此时，Hello，world就会被渲染到id="root"的元素下面；

检查react版本，react17之前的版本渲染方式和react18的不一样：

//react 17
import React from 'react';
import ReactDOM from 'react-dom';
import App from './pages/layout';

ReactDOM.render(<App />, document.getElementById('root'));

// react 18!
import * as React from "react";
import { createRoot } from "react-dom/client";

const root = createRoot(document.getElementById("root"));
root.render(<h1>Hello world!</h1>);
1
2
3
4
5
6
7
8
9
10
11
12
13

摘自react官网

相关阅读:
Kafka监控工具Kafka-eagle安装与部署
MVCC解决的问题是什么
黑马JVM学习笔记-内存结构
win10电脑无法联网，设置IPv4，点击属性无法打开，闪退
OpenXR Reference Space浅析
ubuntu16 虚拟机单盘扩容
WebDAV之π-Disk派盘+ONLYOFFICE
Docker-compose安装mysql
词嵌入数据集的预处理--Word2Vec实现(一)
C#悬浮窗口图像背景

原文地址：https://blog.csdn.net/weixin_46353030/article/details/125518123