首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

ReactDom createPortal子组件不工作

ReactDom createPortal是React中的一个API,用于将子组件渲染到父组件之外的DOM节点上。

React中的组件通常是嵌套在其他组件中的,但有时我们希望将某个组件渲染到DOM树的不同位置,这时就可以使用createPortal来实现。

createPortal的语法如下:

代码语言:txt
复制
ReactDOM.createPortal(child, container)

其中,child是要渲染的子组件,container是要渲染到的DOM节点。

createPortal的优势在于可以在React组件树之外创建DOM节点,这样可以实现一些特殊的布局需求或者在全局范围内显示某个组件。

createPortal的应用场景包括但不限于:

  1. 在弹出框、模态框等组件中,将其渲染到body节点下,以实现全局显示。
  2. 在某个组件中,将子组件渲染到特定的DOM节点上,实现更灵活的布局。
  3. 在React应用中,与第三方库或原生JS代码进行交互,将React组件渲染到特定的DOM节点上。

腾讯云相关产品中,与ReactDom createPortal相关的产品包括:

  1. 腾讯云云服务器(CVM):提供稳定可靠的云服务器,可用于部署React应用和创建DOM节点。
  2. 腾讯云云函数(SCF):无服务器计算服务,可用于处理React组件的渲染逻辑。
  3. 腾讯云云数据库MySQL版(TencentDB for MySQL):提供高性能、可扩展的MySQL数据库服务,可用于存储React应用的数据。

以上是对ReactDom createPortal子组件不工作的问题的解答,希望能对您有所帮助。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

在 React 中实现 keep alive(可参与文末讨论哦)

,也希望重置列表的过滤、排序等条件,那这时就可以对列表页的组件用 keep-alive 包裹一下,这样,当路由切换时,Vue 会将这个组件“「失活」”并缓存起来,而不是直接卸载掉。...Portals ❝Portal 提供了一种将节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。...const targetElement = document.createElement('div') ReactDOM.createPortal(child, targetElement) 基于这种方案...} catch (e) {} } }, [props.active]) return ( {ReactDOM.createPortal...,和 Vue 的 keep-alive 相比,也存在不少缺憾: 需要手动控制 active ,不能直接基于组件销毁/创建的生命周期事件 缺少失活/激活的生命周期时间,组件无法感知自己是不是被缓存起来了

1.7K31

这可能是你需要的React实战技巧_2023-03-15

一、父组件通过 Ref 调用组件中的方法这里同时演示使用函数组件和类组件的父子组件如何编写组件React.forwardRefReact.useImperativeHandlepublic、private...、protected/** * 声明一个 function component 作为组件 * 通过 forwardRef 接收父组件传递的 ref * 通过 useImperativeHandle 改造原...销毁会导致性能等问题 */ ReactDOM.unmountComponentAtNode(node) // 卸载 react 组件 document.body.removeChild...,所以建议直接使用 render 返回的实例,应该用下面方式 ReactDOM.render( <Modal {...props}...,这里只是很简单的演示一下,关键点在你要掌握 ReactDOM.render 和 ReactDOM.createPortal 的使用,当你掌握了这两者,诸如 Toast、Dialog、Dropdown

75540

如何优雅地解决多个 React、Vue 应用之间的状态共享

节点,如果业务组件都各自执行 ReactDOM.render 的话,那就不能保证所有业务组件都在同一颗 React Tree 下,也就不能让 React 的事件冒泡、状态共享、React 的生命周期按照预期进行工作了...开始解决问题 在 ReactDOM.render 主应用后可以让组件挂载在页面上的不同位置 ?...ReactDOM 放在了鼻子上,我没看文档。我笑一下,准备关掉 Github,因为这时间,按传统 Github 的点到为止,最终我已经找到了答案 —— ReactDOM.CreatePortal。...最终我们发现 ReactDOM.createPortal 可以将组件放在 HTML 的任意 DOM 中,被 Portal 的组件行为和普通的 React 节点行为一致,因为它仍然在 React Tree...总结 之前:我们是向宿主平台某个页面提供多个业务组件,按照多入口打包方式打包成多个 chunk 给宿主使用。 问题:多入口的方式对于数据共享非常不友好,能解决但是优雅,也就是文中的方案一。

1.9K20

React-其它内容-Portals 和 React-父子组件通讯-类组件

默认情况下, 所有的组件都是渲染到 root 元素中的Portal 提供了一种将组件渲染到其它元素中的能力Portals 是根据 ReactDOMcreatePortal 所得到的,createPortal...接收两个参数:第一个参数: 需要渲染的内容第二个参数: 渲染到什么地方还可以通过 this.props.children 获取到当前组件所有的元素或者组件:App.js:import React...return ReactDOM.createPortal(this.props.children, document.getElementById('other')); }}class...-类组件本文是延续上一篇文章继续的类组件的参数传递和函数式组件都是同一个世界同一个梦想的没有区别类组件接收参数相比有点不一样首先将 Header.js 改造为类组件:import React from... ) }}export default App;图片子组件设置参数默认值类组件与函数组件设置默认值都是同一个梦想同一个世界的

13920

这可能是你需要的React实战技巧

一、父组件通过 Ref 调用组件中的方法这里同时演示使用函数组件和类组件的父子组件如何编写组件React.forwardRefReact.useImperativeHandlepublic、private...、protected/** * 声明一个 function component 作为组件 * 通过 forwardRef 接收父组件传递的 ref * 通过 useImperativeHandle 改造原...销毁会导致性能等问题 */ ReactDOM.unmountComponentAtNode(node) // 卸载 react 组件 document.body.removeChild...,所以建议直接使用 render 返回的实例,应该用下面方式 ReactDOM.render( <Modal {...props}...,这里只是很简单的演示一下,关键点在你要掌握 ReactDOM.render 和 ReactDOM.createPortal 的使用,当你掌握了这两者,诸如 Toast、Dialog、Dropdown

77410

ReactPortals传送门

ReactDOM.createPortal(children, document.body) : null; }; export const App: FC = () => ( ...,那么我们的组件就会受到用户样式的影响,这是我们希望看到的。...此外,即使我们并不是设计组件库,而仅仅是在我们的业务中实现相关需求,我们也希望我们的组件受到父组件的影响,因为即使最开始我们的结构和样式没出现问题,随着业务越来越复杂,特别是多人协作开发项目,就很容易留下隐患...那么我们就可以认为其无论其节点是否是Portal,像合成事件、Context这样的功能特性都是不变的,下面是一些使用React Portals需要关注的点: 事件冒泡会正常工作: 合成事件将通过冒泡传播到...( console.log("c", e)}>, document.body); const B = ReactDOM.createPortal

17950

React16 新特性

,如: const isReact16 = ReactDOM.createPortal !...ReactDOM.createPortal : ReactDOM.unstable_renderSubtreeIntoContainer; 使用 createPortal 可以快速创建 Dialog...因此,在组件更新时有可能一个更新任务还没有完成,就被另一个更高优先级的更新过程打断,优先级高的更新任务会优先处理完,而低优先级更新任务所做的工作则会完全作废,然后等待机会重头再来。...在 React16 之前,针对上述场景一般有两个解决方案: 首先让组件初始化渲染,通过回调函数把信息传给父组件,父组件完成处理后更新组件 props,触发组件的第二次渲染才可以解决,组件需要经过两次渲染周期...false)} /> ); } React v16.8(~Q2 2019) Concurrent Rendering Concurrent Rendering 并发渲染模式是在阻塞主线程的情况下渲染组件

1.1K20

83.精读《React16 新特性》

,如: const isReact16 = ReactDOM.createPortal !...ReactDOM.createPortal : ReactDOM.unstable_renderSubtreeIntoContainer; 使用 createPortal 可以快速创建 Dialog...因此,在组件更新时有可能一个更新任务还没有完成,就被另一个更高优先级的更新过程打断,优先级高的更新任务会优先处理完,而低优先级更新任务所做的工作则会完全作废,然后等待机会重头再来。...在 React16 之前,针对上述场景一般有两个解决方案: 首先让组件初始化渲染,通过回调函数把信息传给父组件,父组件完成处理后更新组件 props,触发组件的第二次渲染才可以解决,组件需要经过两次渲染周期...false)} /> ); } React v16.8(~Q2 2019) Concurrent Rendering Concurrent Rendering 并发渲染模式是在阻塞主线程的情况下渲染组件

74940

「React进阶」 React全部api解读+基础实践大全(夯实基础万字总结)

React.memo: 第二个参数 返回 true 组件渲染 , 返回 false 组件重新渲染。...这个很有用,我们知道,对于组件,如果是class类组件,我们可以通过ref获取类组件的实例,但是在组件是函数组件的情况,如果我们不能直接通过ref的,那么此时useImperativeHandle和...ReactDOM.hydrate(element, container[, callback]) createPortal Portal 提供了一种将节点渲染到存在于父组件以外的 DOM 节点的优秀的方案...createPortal 可以把当前组件或 element 元素的节点,渲染到组件之外的其他地方。 那么具体应用到什么场景呢?...createPortal接受两个参数: ReactDOM.createPortal(child, container) 第一个:child 是任何可渲染的 React 元素 第二个:container

2.1K30

【技术圈】 React 16.13.0 发布、Firefox 将禁用 TLS 1.01.1

新增一些推荐使用的字符串引用的警告 字符串引用是一个旧的旧式API,建议使用,以后将不推荐使用: (一般不要将 String Refs 与 Refs...或者你还可以用下面的方法达到同样的效果: let createFactory = type => React.createElement.bind(null, type); 弃用 ReactDOM.unstable_createPortal...正式支持 ReactDOM.createPortal Portal 可以有一个很形象的翻译 —— “传送门”。...在 React 中 Portals 提供了一种很好的将节点渲染到父组件以外的 DOM 节点的方式。...例如:我们在写一个弹出框组件 Modal 时,这个组件其实不属于父组件,但是由于我们要把它显示出来,我们必须要把它挂在到父组件下,这是就可以用到 createPortal,我们将它渲染到父组件以外,但是我们可以通过

1.2K10

学用Hook写React组件——通用弹出层

前言 最近升级项目,发现项目有很多各式各样的弹框,但是并没有对其进行抽象通用,根据项目迭代时间不同,实现方式也统一,有使用ReactDOM.createPortal,也有使用ReactDOM.render...以下记录实现过程 实现方案分析 如上所述,主要的实现方式就createPortal、render、appendChild三种方式,appendChild无法直接监听销毁和创建过程,render的方式无法在内部读取到...最终选择createPortal的方式。...如果在hook里实现UI,如果处理了重复的渲染,而方便使用者,是否也可以遵从上面的规则,个人在两种实现到现在也很纠结,恳请各路大神指点利弊),这里先采用了第二种实现,因为Protal为函数组件,这里把...isShow) return null; return ReactDOM.createProtal( //这里定义了一个Wrap组件,作用是对蒙层的样式修改和对蒙层点击事件的控制

1.7K20

你这磨人的小妖精——选中文本并标注的实现过程

小tips如何定位在container下 很自然的回想到,使用reactDOM.createPortal,很类似原生js的appendChild,挂在container下。...因为react下进行原生js操作是很危险的,重新渲染,删除元素的时候分分钟页面白屏——a不是b的节点。...详细问题分析可见 上一篇文章 其实,使用reactDOM.createPortal的确是不科学,因为dangerouslySetInnerHTML的结果需要用原生js获取到container,然后setstate...,通过reactDOM.createPortal把小tips挂在container下。...这个操作过程,夹杂react+原生js,当遇到各种复杂的state、props变化,整个组件重新渲染,新的innerhtml,删除createPortal产生的节点的瞬间,因为它真实的父节点也不在了,最后就报错

1.8K30

Vue3 & React Hooks 新UI组件原理:Modal 弹窗

需要通过redux或props管理数据,可这对于一个UI组件来说过于臃肿了。 React官方也意识到构建脱离于父组件组件挺麻烦的,于是在v16版本推了一个叫“Portal ”的功能。...React / Vue的第二套方案都是基于操作虚拟dom: 「定义一套组件,将组件内的 vnode/ReactDOM 转移到另外一个组件中去,然后各自渲染。」 2....ReactDOM.createPortal(child, container) 第一个参数(child)是任何可渲染的 React 元素,例如一个元素,字符串或碎片。...当然,我们作为一个React Hooks选手,骚一下咋行。 2.1 热门组件库Ant Design中的实现 原本是想从Ant Design库中一窥究竟,却发现事情并不简单。。 ?...render里用了ReactDOM.createPortal` **这也是为什么多数Modal组件不会提供篡改整体样式的API,只能通过全局重置样式。

2.7K41

React性能优化的8种方式

三 什么是FilberFiber的目的是为了让React充分利用调度,以便做到如下几点:暂停工作,稍后再回来优先考虑不同类型的工作重用以前完成的工作如果不再需要,则中止工作为了实现上面的要求,我们需要把任务拆分成一个个可执行的单元...this.key = key; // key调和节点时候用到。...// Root Fiber 可以理解为跟元素 , 通过reactDom.render()产生的根元素export const HostPortal = 4; // 对应 ReactDOM.createPortal...,实例类组件,diff 调和节点是向上归并的过程,如果有兄弟节点,会返回 sibling兄弟,没有返回 return 父级,一直返回到 fiebrRoot这么一上一下,构成了整个 fiber 树的调和...dom节点,如果是类组件则是类实例 child: null, // 第一个节点 return: returnFiber,// 父节点 sibling: null,

33340

读懂React原理之调和与Fiber_2023-03-15

三 什么是FilberFiber的目的是为了让React充分利用调度,以便做到如下几点:暂停工作,稍后再回来优先考虑不同类型的工作重用以前完成的工作如果不再需要,则中止工作为了实现上面的要求,我们需要把任务拆分成一个个可执行的单元...this.key = key; // key调和节点时候用到。...// Root Fiber 可以理解为跟元素 , 通过reactDom.render()产生的根元素export const HostPortal = 4; // 对应 ReactDOM.createPortal...,实例类组件,diff 调和节点是向上归并的过程,如果有兄弟节点,会返回 sibling兄弟,没有返回 return 父级,一直返回到 fiebrRoot这么一上一下,构成了整个 fiber 树的调和...dom节点,如果是类组件则是类实例 child: null, // 第一个节点 return: returnFiber,// 父节点 sibling: null,

48620
领券