对于React应用，Codesandbox会给出"Target container is not a DOM element“错误，但webpack-dev-server不会

对于React应用，当在Codesandbox中运行时，可能会遇到"Target container is not a DOM element"错误，而在webpack-dev-server中运行时却不会出现这个错误。

这个错误通常是由于在React应用的入口文件中，没有正确指定要渲染的DOM元素所导致的。在React中，我们需要使用ReactDOM.render()方法将组件渲染到指定的DOM元素上。

在Codesandbox中，由于环境的限制，可能需要手动创建一个HTML文件，并在文件中添加一个具有唯一ID的DOM元素，然后在React应用的入口文件中使用该ID来指定要渲染的DOM元素。

以下是一个示例的解决方案：

在Codesandbox中创建一个HTML文件，命名为index.html，并添加以下内容：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>React App</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

在React应用的入口文件（通常是index.js或App.js）中，使用ReactDOM.render()方法将组件渲染到指定的DOM元素上。确保指定的DOM元素与HTML文件中的ID匹配。

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

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

这样，当在Codesandbox中运行React应用时，就不会再出现"Target container is not a DOM element"错误。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云云函数（SCF）。

腾讯云云服务器（CVM）：提供可扩展的计算能力，适用于各种规模的应用程序和工作负载。了解更多信息，请访问：腾讯云云服务器（CVM）
腾讯云云函数（SCF）：无需管理服务器即可运行代码的事件驱动计算服务。适用于构建和运行无服务器应用程序。了解更多信息，请访问：腾讯云云函数（SCF）

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

从零开始的 React 再造之旅

作者：devrsi0n https://segmentfault.com/a/1190000021689852 React 是目前最流行的前端框架，很多读者用 React 很溜，但想要深入学习 React...React 应用：在 root 根结点上渲染一个 Hello World!...注意：React 并不会包裹字符串这类值，如果没有 children 也不会创建空数组，这里简单起见，统一这样处理可以简化我们的代码。我们把本文的框架叫做 redact，以区别 react。...(child, dom) ); // 插入父节点 container.appendChild(dom); } 上面的代码放在了 CodeSandbox（在线开发环境），项目基于 Create...代码如下，点击 Count 试试： redact-3 ---- 结语除了帮助读者理解 React 核心工作原理外，本文很多变量都和 React 官方代码保持一致，比如，读者在 React 应用的任何函数组件里断点

8521 0

深入学习 React 合成事件

批量更新当然如果我们使用React提供的事件，而不是使用我们自己绑定的原生事件除了会进行事件委托以外还有什么优势呢？...会发现通过React事件内多次调用setState，会自动合并多个setState，但是在原生事件绑定上默认并不会进行合并多个setState，那么有什么手段能解决这个问题呢？...(),但还是会导致另外一个React版本上绑定的事件没有被阻止触发，所以在17版本中会把事件绑定到render函数的节点上。...在线demo地址：https://codesandbox.io/s/v16fixevent2-4e2b5 React17版本修复方法在17版本中React事件并不会绑定在document上，所以并不需要修改任何代码...，最后给出多种的解决方案，能够在繁杂的业务中挑选最合适的技术方案来进行实践。

1.1K3 1

Resize Observer 介绍及原理浅析

响应式设计如今也成为 web 应用的基本需求，而现在很多 web 应用都已经组件化，这意味着我们如果想要实现响应式的应用，那么我们也需要有某种方式监听「组件/元素」大小的变化，以便让「组件/元素」...频繁调用 getBoundingClientRect 、 getComputedStyle等 API 会导致「浏览器重排（reflow）」，导致页面性能变差，举个例子：https://codesandbox.io...:', entry.target); console.log(`Element size: ${cr.width}px x ${cr.height}px`); console.log(`...useLayoutEffect 和 useEffect 的最大差别在于执行时机的不同，useEffect 会在浏览器绘制完成之后调用，而 useLayoutEffect 则会在 React 更新 dom...在 ResizeObserver 的回调中对 dom 进行操作，比如改变另外一个元素的大小，或是隐藏/展示某个元素，这些操作可能会导致新的回调调用，引发无限循环，最终导致界面 UI 卡死。

3.3K4 0

React新文档：不要滥用Ref哦～

同样，「使DOM聚焦」需要调用element.focus()，直接执行DOM API也是不受React控制的。...虽然他们是「脱离React控制的因素」，但为了保证应用的健壮，React也要尽可能防止他们失控。失控的Ref 对于Ref，什么叫失控呢？...测量DOM尺寸这些情况下，虽然我们操作了DOM，但涉及的都是「React控制范围外的因素」，所以不算失控。...但是下面的情况：执行ref.current.remove移除DOM 执行ref.current.appendChild插入子节点同样是操作DOM，但这些属于「React控制范围内的因素」，通过ref...参考资料 [1] React文档中的例子: https://codesandbox.io/s/sandpack-project-forked-s33q3c [2] 文档中的示例: https://codesandbox.io

7882 0

React 性能优化完全指南，将自己这几年的心血总结成这篇！

相比于 shouldComponentUpdate 方法，会增加组件层级，但不会有第二个弊端。...该例子中，父组件状态更新后，不使用 useMemo 的子组件会执行 Render 过程，而使用 useMemo 的子组件不会执行。...当组件能很快处理搜索结果时，用户不会感觉到输入延迟。但实际场景中，中后台应用的列表页非常复杂，组件对搜索结果的 Render 会造成页面卡顿，明显影响到用户的输入体验。...对于这个优化点，笔者遇到一个真实案例。在公司的招聘项目中，通过下拉菜单可查看某个候选人的所有投递记录。平常这个列表也就几十条，但后来用户反馈『下拉菜单点击后要很久才能展示出投递列表』。...属性，跳过组件 Render 阶段这个优化在业务中应该用不上，但还是非常值得学习的，将来可以应用到组件库中。

7.4K3 0

精读《React Conf 2019 - Day1》

React 是一个协议标准（读到 reactReconciler 章节会更有体感），React 像 HTML，但 React 不止能构建 HTML 应用，React 希望构建一切。...对于 UX 问题，React 也有 Concurrent mode、Suspense 等方案。...代码检测静态检测类型错误、拼写错误、浏览器兼容问题。在线检测 dom 节点元素问题，比如是否有可访问性，比如替代文案 aria-label。.../react-dom-mini"; import "....commit 成功后给出提示或记录到日志。但 Git hooks 仍然有局限性：容易被绕过：--no-verifuy --no-merge --no-checkout ---force。

1.7K2 0

React源码解析之ReactDOM.render()

Function) { invariant( isValidContainer(container), 'Target container is not a DOM element...Function, ) { //错误抓取 invariant( isValidContainer(container), 'Target container...is not a DOM element...//render中一般渲染的是DOM标签，所以不会有_reactRootContainer存在， // 所以第一次渲染，root是不存在的 let root: _ReactSyncRoot =.../packages/react-dom/src/client/ReactDOM.js ----

1.4K1 0

「实用推荐」如何优雅的判断元素是否进入当前视区

比如说，你想跟踪 DOM 树里的一个元素，当它进入可见窗口时得到通知。...单原模型（Single Origin Model）和浏览器不会让你获取 iframe 里的任何数据。这对于经常在 iframe 里加载的广告页面来说是一个很常见的问题。...console.log(entry); // target element: // entry.boundingClientRect // entry.intersectionRatio...= change.target; var content = container.querySelector('template').content; container.appendChild...实用 Npm 包推荐和今天话题相关的npm 包推荐的是：react-visibility-sensor 地址：https://www.npmjs.com/package/react-visibility-sensor

1.4K2 0

从源码角度看React-Hydrate原理_2023-03-01

commitBeforeMutationEffects commitMutationEffects commitLayoutEffects React 在 render 阶段会根据新的 element...fiber 节点和 dom 实例是否满足hydrate的条件：对于类型为HostComponent的 fiber 节点，如果当前位置对应的 DOM 实例nodeType为ELEMENT_NODE，并且...div#A 和 h1#A 不能混合，这时并不会立即结束混合的过程，React 继续对比h1#A的兄弟节点，即p#B，发现div#A还是不能和p#B混合，经过最多两次对比，React 认为 dom 树中已经没有...同时，服务端多返回了一个extra属性，因此需要控制台提示，但由于已经提示了id不同的错误，这个错误就不会提示。...同时，服务端多返回了一个extra属性，因此需要控制台提示，但由于已经提示了id不同的错误，这个错误就不会提示。

3602 0

从react源码角度看React-Hydrate原理

fiber 节点和 dom 实例是否满足hydrate的条件：对于类型为HostComponent的 fiber 节点，如果当前位置对应的 DOM 实例nodeType为ELEMENT_NODE，并且fiber.type...div#A 和 h1#A 不能混合，这时并不会立即结束混合的过程，React 继续对比h1#A的兄弟节点，即p#B，发现div#A还是不能和p#B混合，经过最多两次对比，React 认为 dom 树中已经没有...注意getNextHydratable会判断 dom 实例是否是ELEMENT_NODE类型(对应的 fiber 类型是HostComponent)或者TEXT_NODE类型(对应的 fiber 类型是...同时，服务端多返回了一个extra属性，因此需要控制台提示，但由于已经提示了id不同的错误，这个错误就不会提示。...同时，服务端多返回了一个extra属性，因此需要控制台提示，但由于已经提示了id不同的错误，这个错误就不会提示。

3545 0

从源码角度看React-Hydrate原理

3593 0

2021年从零开发前端项目指南

即使有机会从零配置一个项目，一般也不会自己手动建这些配置文件，直接用 create-react-app、Ant Design Pro 等自动帮我们生成各个目录和配置文件就可以了，省时省力。...npm i -D webpack webpack-cli webpack-dev-server 安装之后 package.json 会自动记录我们安装的 node 包，对应版本如下，如果安装的和我不一样的话...img React React 可以让我们专注于构建用户界面，而不需要再手动维护 dom 元素的更新，当然还可以用 VUE。安装核心库 react ，以及渲染 Web 的 react-dom 。...npm i react react-dom 修改 src/main.js 体验一下。...配合 Vscode 我们也可以做到边写代码边自动检测 eslint，以及保存的时候自动修复 eslint 相关错误。

2.9K3 0

从源码角度看React-Hydrate原理

3273 0

从源码角度看React-Hydrate原理_2023-02-14

3105 0

从源码角度看React-Hydrate原理

5003 0

创建 React 应用的 7 种方式，你用过几种？

如果说对于上面的配置你不知所措，我想你有必要了解下，如何从零创建一个 webpack react 工程，这将帮你修改 webpack 工程更加得心应手。...支持命令行执行 webpack-dev-server - 开发模式下启动服务器，修改代码，浏览器会自动刷新。...安装 react 和 react-dom npm i react react-dom 安装到 dependencies 中，因为react和react-dom 是运行时的依赖项建一个 index.html...Server component- 也是 SSR 的一种，但互补了 SSR 的不足，让网页拥有流式渲染的能力。...七：在线开发或许你疲倦了 cli 创建 react 应用的方式，因为有时候，只想演示一个简单应用示例，那么 https://stackblitz.com/ 和 https://codesandbox.io

7.2K1 0

React学习(四)-理清React的工作方式

('root'); ReactDOM.render(, container); 从上面一看,对于刚接触React的小伙伴来说,可能觉得用原生JS,JQ实现起来很简单呀,React...对于简单的业务实现,是没有什么问题的,但是当DOM结构层级比较深,要进行一些复杂的逻辑操作时,此时,不断的操作DOM就变得非常恶心了的这里并不是忽视原生JS,即使有了一些上层的框架简化了操作,但核心的逻辑代码编写仍然是要写的...对于大型项目迭代开发,这种方式编写的代码会更容易的管理,因为React只是用作于视图UI层的渲染工作,我们关心的是渲染成什么样子,而不需要关心如何实现渲染,怎么进行DOM操作这就好比在业界里有这么一句话...元素时创建开销极小的普通对象,并不会跟原生操作DOM一样,影响整个DOM的重绘渲染,React DOM会负责更新DOM与React元素保持一致 React只更新它需要更新的部分,React DOM会将元素和它的子元素与它们之前的状态进行比较...DOM树是对HTML的抽象,而vitrtual DOM就是对DOM树的抽象,虚拟DOM不会触及浏览器,虚拟DOM本质上就是javascript对象,还记得前面说过的JSX是React.createElement

1.8K3 0

webpack+es2015+react+Ant Design纲领

= document.createElement('div'); // Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的 element.innerHTML = _...安装react cnpm install react --save-dev cnpm install react-dom --save-dev 编写react组件 import React...webpack-dev-server 本文主要介绍下webpack-dev-server，webpack-dev-server不仅能够自动build，而且还能够自动刷新浏览器。...source map 当 webpack 打包源代码时，可能会很难追踪到错误和警告在源代码中的原始位置。...这并通常没有太多帮助，因为你可能需要准确地知道错误来自于哪个源文件。

1.1K3 0

60行代码实现React的事件系统

由于如下原因，React的事件系统代码量很大：需要抹平不同浏览器的差异与内部的「优先级机制」绑定需要考虑所有浏览器事件但如果抽丝剥茧会发现，事件系统的核心只有两个模块： SyntheticEvent...SyntheticEvent存在的目的是抹平浏览器间在事件对象间的差异，但是对于不支持某一事件的浏览器，SyntheticEvent并不会提供polyfill（因为这会显著增大ReactDOM的体积）。...原生事件对象会保存在nativeEvent属性中。同时，实现了stopPropagation方法。...）正向遍历并执行一遍所有收集的回调（模拟冒泡阶段的实现）首先，实现第一步： // 步骤1 const addEvent = (container, type) => { container.addEventListener...参考资料 [1] 在线DEMO地址: https://codesandbox.io/s/optimistic-torvalds-9ufc5?file=/src/index.js

4472 0

React基础(4)-理清React的工作方式

对于简单的业务实现,是没有什么问题的,但是当DOM结构层级比较深,要进行一些复杂的逻辑操作时,此时,不断的操作DOM就变得非常恶心了的,这里并不是忽视原生JS,即使有了一些上层的框架简化了操作,但核心的逻辑代码编写仍然是要写的...对于大型项目迭代开发,这种方式编写的代码会更容易的管理,因为React只是用作于视图UI层的渲染工作,我们关心的是渲染成什么样子,而不需要关心如何实现渲染,怎么进行DOM操作这就好比在业界里有这么一句话...,组件生成的 HTML 结构只能有一个单一的根节点 Virtual(虚拟) DOM 元素(JSX)是构成React应用的最小砖块,它描述了你在在屏幕上看到的UI内容与浏览器的DOM元素不同,React...元素时创建开销极小的普通对象,并不会跟原生操作DOM一样,影响整个DOM的重绘渲染,React DOM会负责更新DOM与React元素保持一致 React只更新它需要更新的部分,React DOM会将元素和它的子元素与它们之前的状态进行比较...DOM树是对HTML的抽象,而vitrtual DOM就是对DOM树的抽象,虚拟DOM不会触及浏览器,虚拟DOM本质上就是javascript对象,还记得前面说过的JSX是React.createElement

2.1K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

对于React应用，Codesandbox会给出"Target container is not a DOM element“错误，但webpack-dev-server不会

相关·内容

从零开始的 React 再造之旅

深入学习 React 合成事件

Resize Observer 介绍及原理浅析

React新文档：不要滥用Ref哦～

React 性能优化完全指南，将自己这几年的心血总结成这篇！

精读《React Conf 2019 - Day1》

React源码解析之ReactDOM.render()

「实用推荐」如何优雅的判断元素是否进入当前视区

从源码角度看React-Hydrate原理_2023-03-01

从react源码角度看React-Hydrate原理

从源码角度看React-Hydrate原理

2021年从零开发前端项目指南

从源码角度看React-Hydrate原理

从源码角度看React-Hydrate原理_2023-02-14

从源码角度看React-Hydrate原理

创建 React 应用的 7 种方式，你用过几种？

React学习(四)-理清React的工作方式

webpack+es2015+react+Ant Design纲领

60行代码实现React的事件系统

React基础(4)-理清React的工作方式

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐