react 18 createRoot没有渲染出DOM元素

最新推荐文章于 2024-06-04 12:18:33 发布
最新推荐文章于 2024-06-04 12:18:33 发布
阅读量838 收藏 1
点赞数
分类专栏： 学习 文章标签： react.js 前端 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46353030/article/details/125518123
版权

报错1

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

解决办法

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

报错2:

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

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

  1. 检查body里面是否加上了根元素，如：
//...
<body>
	<div id
最低0.47元/天 解锁文章
Krlin_
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-dom.min@16.14.0.zip
05-18
4. `ReactDOM.createRoot()` 和 `ReactDOM.render()`：在React 16.8引入的并发模式中，`createRoot`用于创建一个可更新的根节点，以支持新的批量更新策略，提高应用性能。 5. `ReactDOM.flushSync()`：强制同步执行...
React如何将组件渲染到指定DOM节点详解
08-29
主要给大家介绍了关于React如何将组件渲染到指定DOM节点的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习下吧。
react createRoot和createPortal的用法和区别
qq_42704945的博客
07-29 3866
那么我们有了这个根节点是不是就可以把我们的弹窗组件放到这个根节点里面呢？其实我们可以用这个来做很多的事情。这就是传统的创建react项目然后挂载到根节点的方式，和vue中的类似原理都是一样的，创建一个节点然后把这个节点渲染到根节点中。这样做你会发现你这个组件不灵活会被很多东西影响，比如你的父级元素有相对定位等等都会影响到你这个弹窗组件。这样生成的dom加载在body下，实现很多弹窗消息提示还有draw这样的组件都可以采用这样的方式。这样创建的元素就会挂载到根节点container-model这个节点下面。
ReactDOM 18版本 使用createRoot 替换render详解
weixin_44510200的博客
06-04 855
React 18 提供了两个 root API，被称之为 Legacy Root API 和 New Root API，在本文我将介绍二者的区别，以及新api的优势和使用方法
【react】react18由render替换为createRoot区别
热门推荐
不忘初心，坚定道路！
06-14 1万+
前言 18版本由render替换为createRoot，看看有什么区别和为什么要这么做。 render与createRoot react18中装载了2个api，所以你用以前的也没事。在源码中都有导入： import { findDOMNode, render, hydrate, unstable_renderSubtreeIntoContainer, unmountComponentAtNode, } from './ReactDOMLegacy'; import {create
react源码-debuger解析- createRoot阶段1
lin_fightin的博客
03-13 1985
看懂这个之后https://react.iamkasong.com开始debugger源码 CreateRoot ReactDOM.createRoot(document.getElementById('')) craeteRoot主要调用了createContainer创建rootFiber和FiberRoot，并且将它们联系起来。 createContainer```调用了```createFiberRoot const root: FiberRoot = new FiberRootNode(...)
vite+react+ts+mobx+antd+react-router-dom+sass+tailwindcss
清云
04-23 6564
vite+react+ts+mobx+antd+react-router-dom+sass+tailwindcss 创建 react 项目
ReactDOM.render() 无法渲染问题
qq_39636712的博客
02-05 3281
描述：我是一名后台开发工程师，算是react小白，按照学习资料，进入渲染页面环节，发现npm start 没有刷新出来我要打印的东西，顿时头疼。也不知道该如何打印出来。搜索了很多文章并未找到合理的解释。最后在一篇文章中安装了一个webpack得以解决，但是我不明白为什么。是什么原理导致了无法渲染出来。我查看了webpack是干嘛的，但是还是不能理解，为什么渲染不出来，本篇主要希望大神指点，请留言！ 1、我的解决办法 终端执行：npm i webpack -g 2、代码 index.js import Rea
React17练习了解
07-25
现在，事件处理器不再被挂载到组件实例上，而是直接与DOM元素绑定，这提高了事件处理的效率。 2. **并发模式预发布**：尽管React17本身并未实现完整的并发模式，但它为未来的并发模式做了基础设施的准备，如`root`...
create-react-app-material-ui:使用Material-UI表单轻松创建React App提交示例
05-14
React的虚拟DOM（文档对象模型）技术提高了性能，减少了对真实DOM的操作。 Material Design是一种广泛采用的设计语言，它为应用程序提供了一套统一的视觉元素、交互模式和动画效果。Material-UI是React与Material ...
React 练手项目帮助快速创建项目
最新发布
06-11
- **虚拟DOM**：React通过虚拟DOM提高性能，只更新必要的部分而不是整个页面。 - **JSX**：React引入了JSX语法，允许在JavaScript中混写HTML，使得代码更易读。 - **状态与属性**：组件的状态决定了它如何呈现，...
React官网入门教程
02-22
假设我们有一个id为"root"的HTML元素，我们可以这样渲染HelloWorld组件： ```jsx import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render(, document.getElementById('root')); ``` ...
在React18中使用createRoot代替render
⑥②专栏
04-16 3734
在React18中使用createRoot代替render import * as ReactDOMClient from 'react-dom/client'; ReactDOMClient.createRoot(/*...*/); ReactDOMClient.hydrateRoot(/*...*/); 什么是 root? root就是指向React渲染dom树的一个最上层的数据结构。在旧的API中，root是不透明的，因为我们将它连接到DOM元素，并通过DOM节点访问它，从来不暴露给用
React项目中发生空白但不报错的原因分析和解决？
努力的鋜
11-24 929
在react中如何捕获错误，如何调试代码，如何使用一些工具来进行错误分析，如何做一些错误排查。怎么解决
使用createRoot()方法创建的react组件在调用ReactDOM.unmountComponentAtNode()方法卸载报错的解决方案
qq_54896312的博客
11-25 1674
使用createRoot()方法创建的react组件在调用ReactDOM.unmountComponentAtNode()方法卸载报错的解决方案。Warning: unmountComponentAtNode(): The node you're attempting to unmount was rendered by React and is not a top-level container. Instead, have the parent component update its state a
react 页面渲染为空的情况
qq_39966730的博客
11-10 640
react 页面渲染为空的情况
05-React 状态更新
jiegiser博客
11-12 1679
在 React 中触发更新的方式主要有以下几种：ReactDOM.render、setState、forUpdate 以及 hooks 中的 useState 等，关于 hooks 的后面会专门写一篇文章分析。
react中createroot如何使用，请给我举2个例子
03-28
React.createRoot() 是 React 18 中引入的新功能，它允许我们在应用中使用 Concurrent Mode（并发模式）。它可以将一个 React 应用程序渲染到一个容器中。下面是两个使用 React.createRoot() 的例子： 1. 渲染整个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值