使用useEffect时，react createPortal未触发

是因为createPortal是在组件渲染之后才会执行的，而useEffect是在组件渲染之后执行的副作用函数。因此，如果在useEffect中使用createPortal，可能会导致createPortal未能触发。

要解决这个问题，可以将createPortal放在组件的渲染阶段之外，例如在组件的顶层或者在组件的生命周期方法中使用createPortal。这样可以确保createPortal在组件渲染之后执行。

另外，createPortal是React提供的一个API，用于将组件渲染到DOM树中的任意位置。它的作用是将组件的内容渲染到指定的DOM节点中，而不是当前组件所在的位置。这在一些特殊的场景下非常有用，例如在弹出框、模态框或者侧边栏中渲染组件。

在React中使用createPortal的步骤如下：

导入createPortal函数：import { createPortal } from 'react-dom';
创建一个容器节点：const portalContainer = document.createElement('div');
将容器节点添加到DOM树中的指定位置：document.body.appendChild(portalContainer);
使用createPortal将组件渲染到容器节点中：createPortal(<Component />, portalContainer);
在组件卸载时，记得将容器节点从DOM树中移除：document.body.removeChild(portalContainer);

使用createPortal的优势是可以将组件渲染到DOM树中的任意位置，而不受组件层级的限制。这样可以实现一些特殊的UI效果，例如弹出框、悬浮窗口等。

推荐的腾讯云相关产品是云服务器（CVM），它提供了强大的计算能力和稳定的网络环境，适用于各种应用场景。您可以通过以下链接了解更多关于腾讯云服务器的信息：https://cloud.tencent.com/product/cvm

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

有帮助

没帮助

相关·内容

React系列:useEffect的使用

useEffect的使用 useEffect的第二个参数不同，useEffect的加载不同当第二个参数为没有的时候只在组件初始渲染和组件更新之后加载当第二个参数为[] 的时候只在初始渲染之后加载...当第二个参数为[有依赖] 的时候只在初始渲染之后和依赖修改的时候进行加载 function App() { useEffect(()=>{ //额外的操作获取频道列表 async

1271 0

遇到这三个 api，你会把它封装成组件么？

Portal react 提供了 createPortal 的 api，可以把组件渲染到某个 dom 下。...用起来也很简单： import { createPortal } from 'react-dom' function App() { const content = <div className=...就作为选择器来找到对应的 dom，如果是 HTMLElement，则直接作为挂载节点，否则，返回 document.body：然后在 attach 的元素下添加一个 dom 节点作为容器：当组件销毁时，...} from 'react'; import { createPortal } from 'react-dom'; export interface PortalProps { attach...通过 React.cloneElement 给 children 加上 ref 来获取 dom 节点。然后在 useLayoutEffect 里拿到 ref 通过 setState 触发更新。

1031 0

升级React17，Toast组件不能用了

会使用ReactDOM.createPortal在document.body上挂载一个div，内容为who is handsome？。...事实上，在一个大型项目中，如果从v16升级到v17，在使用了如上所示的「在document挂载原生click事件」方式实现toast的同时，再使用Portal在document.body挂载DOM都会触发该...合成事件」会在React组件树中从底向上冒泡当「合成事件」冒泡到触发点击的组件时，调用onClick方法这就是React合成事件的原理。...「合成事件」会在React组件树中从底向上冒泡当「合成事件」冒泡到触发点击的组件时，调用onClick方法「原生点击事件」继续向上冒泡到document.body 重复触发步骤3 难道bug的原因是...useEffect的边界case 在React中，一个常见的操作链路是：用户触发事件 -> 改变state -> 依赖该state的useEffect回调执行去掉中间环节，就是这样：用户触发事件

1.6K2 0

【React Hooks 专题】useEffect 使用指南

引言 Hooks 是 React 16.8 的新增特性，至今经历两年的时间，它可以让你在不编写 class 组件的情况下使用 state 以及其他 React 特性。...useEffect 是基础 Hooks 之一，我在项目中使用较为频繁，但总有些疑惑，比如：如何正确使用 useEffect ？ useEffect 的执行时机？...正确使用 useEffect 基本使用方法：useEffect(effect)根据传参个数和传参类型，useEffect(effect) 的执行次数和执行结果是不同的，下面一一介绍。...subscription.unsubscribe(); }; }, [props.source], ); 需要注意的是：当依赖项是引用类型时，React 会对比当前渲染下的依赖项和上次渲染下的依赖项的内存地址是否一致...的清除函数在每次重新渲染时都会执行，而不是只在卸载组件的时候执行。

1.9K4 0

手写一个 OnBoarding 组件

效果就是在 dom 渲染完之后，触发重新渲染，从而渲染这个 OnBoarding 组件：第一次渲染的时候，元素是 null，触发重新渲染之后，就会渲染下面的 Mask 了： Onboarding/index.tsx...的全部代码如下： import React, { FC, useEffect, useState } from 'react'; import { createPortal } from 'react-dom...所以给 Mask 组件加一个动画开始和结束的回调： import React, { CSSProperties, useEffect, useState } from 'react'; import {..., { FC, useEffect, useState } from 'react'; import { createPortal } from 'react-dom'; import { Button...此外，还要注意，mask 需要在 dom 树渲染完之后才能拿到 dom 来计算样式，所以需要 useEffect + setState 来触发一次额外渲染。这样，OnBoarding 组件就完成了。

1221 0

何时在 React 中使用 useEffect 和 useLayoutEffect

React Hooks,在 React 16.8 中引入，彻底改变了我们在 React 中编写组件的方式。它们允许我们在不编写类的情况下使用状态和其他 React 功能。...count 改变时重新运行效果传递给 useEffect 的函数将在渲染提交到屏幕后运行。...但是，它在所有 DOM 变化后同步触发。这在你需要在 DOM 更新后进行新的更新和测量，但在浏览器有机会“绘制”这些更改之前非常有用，比如从 DOM 中读取布局或同步重新渲染时。...因此，除非你需要在浏览器“绘制”之前进行更新和测量，否则请坚持使用 useEffect。...总之，理解 useEffect 和 useLayoutEffect 之间的差异对于确保 React 应用程序的性能至关重要。在正确的时间使用正确的钩子，你就能创建出流畅高效的 React 应用程序。

2220 0

使用 React useEffect 的一个小坑

今天讲一个使用 useEffect Hooks 的时候遇到的一个小陷阱，看下面的代码。...其实要做到上面的规矩，也没那么难，不过在实际操作的时候，的确让人容易失误，你看，在上面的例子中，useEffect并没有直接使用count，只不过使用了handleResize，handleResize...虽然直接使用了count，但是它作为一个独立函数并不知道（或者说也不该知道）自己会被useEffect用到，这……让人防不胜防啊！...所以，使用useEffect的时候，不要调用函数层次太多，代码应该一眼看清楚哪些函数会被useEffect调用。...最后, eslint-plugin-react-hooks 插件可以给出依赖提示，一定程度上能避免类似的问题。

1.5K3 0

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

EventEmitter 我们直接使用 eventemitter3 库提供的 on 监听事件以及emit 触发事件。...中是如何使用的吧 import React,{ useState, useEffect} from 'react' import {getMyEmitter, ACTION} from '....+ 传送门 React 推荐做法在方案一中我们说了，使用事件触发的方式同步数据不是 React 推荐做法，那数据共享的推荐做法是什么呢？...React Tree 下时才能让 React 的事件冒泡、状态共享、React 的生命周期按照预期进行工作。...预定义 HTML 挂载点 —— 使用 Portal 时，需要定义一个 HTML DOM 元素作为 Portal 组件的挂载点。

2K2 0

Popover 下拉容器定位原理浅析

（封面图片来自于基于 CC0 协议的 shopify ）使用过 Antd 的小伙伴应该深有体会，但是我们用的多了，也就想了解它怎么做的（：跟我一样吧乍一看实现方式并不难，但是其实本篇文章更想表述一些细节的内容...目标能力精准定位跟随屏幕缩放实时定位跟随滚动构造容器 "use client"; import {FC, PropsWithChildren, RefObject, useCallback, useEffect..., useRef, useState} from "react"; import { createPortal } from "react-dom"; import { cloneElement } from..."react"; const getStyle = (ref: RefObject, position: 'top' | 'bottom' | 'right' | 'left...const [styles, setStyles] = useState({}); const [opacity, setOpacity] = useState(0); useEffect

1611 0

ReactPortals传送门

MouseLeave：当鼠标光标离开一个元素时触发，该事件仅在鼠标从元素内部离开时触发，不会对元素外部的父元素产生影响。...MouseOut: 当鼠标光标离开一个元素时触发，该事件在鼠标从元素内部离开时触发，并且会冒泡到父元素。...我个人还是比较推荐使用MouseEnter/MouseLeave，主要有这么几点理由: 避免冒泡问题: MouseEnter和MouseLeave事件不会冒泡到父元素或其他元素，只在鼠标进入或离开元素本身时触发...React以控制Portal节点及其生命周期: Portal未脱离React组件树，当通过Portal渲染子组件时，React仍然可以控制组件的生命周期。...预定义的HTML挂载点: 使用React Portal时，我们需要提前定义一个HTML DOM元素作为Portal组件的挂载。

2515 0

React高级特性解析

react conText 使用API React.createContext 返回的是组件对象可以利用结构的方式第一种方式使用Provider包裹的组件都可以获取提供者的value Context.Consumer..., 需要挂载的节点) React.createPortal(Component, nodeElement) HOC 主要存在作用抽离state 复用逻辑操作方式可以直接使用ES7装饰器对一个函数传入一个组件...当父组件渲染到子组件的时候发现异步请求直接抛出错误捕获的结果是个promise ComponentDidCatch捕获到这个promise的异常 pending状态下渲染fallback 当resolve时重新...提供了一系列函数式组件的钩子 const [value, setValue] = useState(); value则是state状态 setValue 则是个函数需要设置值直接调用setValue 传入需要设置的值即可 useEffect...setState不会立马改变React组件和state的值 setState通过触发一次组件的更新来引发重绘多次setState函数调用产生的效果会合并本文为作者原创，手码不易，允许转载，转载后请以链接形式说明文章出处

9172 0

React实战精讲(React_TSAPI)

如果我们使用的是 textarea，我们将使用 HTMLTextAreaElement 来代替。注意，MouseEvent 也是一个泛型，你可以在必要时对它进行限制。...，如请求数据、修改全局变量，打印、数据获取、设置订阅以及手动更改 React 组件中的 DOM 都属于副作用操作 ❞ 不断执行当useEffect不设立第二个参数时，无论什么情况，都会执行根据依赖值改变...优先考虑使用 useEffect 或 useLayoutEffect 来替代。...---- react-dom createPortal createPortal：在Portal中提供了一种将子节点渲染到 DOM 节点中的方式，「该节点存在于 DOM 组件的层次结构之外」。...当调用 render 时，「里面的任何现有 DOM 元素都会被替换」。后面的调用使用 React 的 DOM diffing 算法进行有效更新。

10.4K3 0

学用Hooks写React组件——基础版Select组件

思路构图与UI分层方案一：通过一个父组件包裹显示框组件和下拉框组件，这样的实现方式简单粗暴，而且能解决大部分场景，但是存在几个问题：在scroll容器中会存在显示遮挡问题父组件容器层级较低时，高层级组件与下拉框组件位置重合问题...作为码农当然不能满足于此所以方案二：通过React提供的createPortal来实现render body的方式渲染到body节点下，解决方案一的问题。...这里使用了React.createProtal来创建root节点外的组件，参考：https://zh-hans.reactjs.org/docs/portals.html。...Position组件是我们上面提到的定位组件，如果Position组件不在可视区时，执行noNotVisibleArea()方法让下拉框不显示。...使用React.cloneElement对props.children进行新的props传输，参考官网：https://zh-hans.reactjs.org/docs/react-api.html#cloneelement

3K2 0

React源码解析之FunctionComponent（上）

前言在 React源码解析之workLoop 中讲到当workInProgress.tag为FunctionComponent时，会进行FunctionComponent的更新： //FunctionComponent...HooksDispatcherOnMount : HooksDispatcherOnUpdate; //workInProgress.type，这里能当做 function 使用，...', ); return children; } 解析：在开发者使用FunctionComponent来写 React 组件的时候，是不能用setState的，取而代之的是useState(...(child, container) //https://zh-hans.reactjs.org/docs/react-dom.html#createportal case...returnFiber, currentFirstChild, newChild, expirationTime, ); } //如果未符合上述的

1K1 0

React 开发必须知道的 34 个技巧【近1W字】

的 API 进行了封装,暴露比较方便使用的钩子; 4.钩子有: 钩子名作用 useState 初始化和设置状态 useEffect componentDidMount，componentDidUpdate...ref时公开给父组件的实例值 useMutationEffect 作用与useEffect相同，但在更新兄弟组件之前，它在React执行其DOM改变的同一阶段同步触发 useLayoutEffect 作用与...useEffect相同，但在所有DOM改变后同步触发 5.useImperativeMethods function FancyInput(props, ref) { const inputRef...也未移除 export default class Six extends React.Component { state = { countOne:1, changeFlag:''...作用:组件的render函数返回的元素会被挂载在它的父级组件上,createPortal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案 import React from "react

3.5K0 0

React 组件优化方案

3. useEffect useEffect React Hooks 中的一个钩子函数。effect hooks 可以让你在函数组件中执行副作用操作。 useEffect 函数很强大。...比如上面代码中的 handleClick 函数就可以使用 useCallback 包装一下： import React,{useEffect,useCallback,useState} from "react...页面卸载时，清除 el 元素 document.body.removeChild(el); } },[]); return ReactDOM.createPortal...React.createPortal 可以实现 Portal 插槽。...实现原理可以参考这篇博文：深入探究 immutable.js 的实现机制[4] 当熟练使用 immutable 时就差不多能解决 react 组件不更新的问题了。

3.2K2 0

听说现在都考这些React面试题

的使用场景 06 使用 react 实现一个通用的 message 组件 07 如何使用 react hooks 实现 useFetch 请求数据更多描述: 比如设计成 `useFetch` 这种形式...componentWillUnmount() { modalRoot.removeChild(this.el); } render() { return ReactDOM.createPortal...() message.success() 14 react hooks 中如何模拟 componentDidMount 在 useEffect，把第二个参数即依赖的状态，设置为 [] useEffect...的使用场景是什么 21 useEffect 中如何使用 async/await function useEffect(effect: EffectCallback, deps?...是同步还是异步的 39 什么是服务器渲染 (SSR) 40 在 React 中如何实现代码分割 (code splitting) 41 在 React 中如何做好性能优化 42 在 React 中发现状态更新时卡顿

1K3 0

前端常见react面试题合集

相反，使用像useEffect这样的内置钩子。...// React当我们想强制导航时，可以渲染一个，当一个渲染时，它将使用它的to属性进行定向...useImperativeMethods 自定义使用ref时公开给父组件的实例值useMutationEffect 更新兄弟组件之前，它在React执行其DOM改变的同一阶段同步触发useLayoutEffect...工厂组件会导致 React 变大且变慢。act（）也支持异步函数，并且你可以在调用它时使用 await。使用进行性能评估。...使用CreatePortal将组件堆栈添加到其开发警告中，使开发人员能够隔离bug并调试其程序，这可以清楚地说明问题所在，并更快地定位和修复错误。

2.4K3 0

前端常考react面试题（持续更新中）_2023-02-26

使用效果： useEffect是按照顺序执行代码的，改变屏幕像素之后执行（先渲染，后改变DOM），当改变屏幕内容时可能会产生闪烁；useLayoutEffect是改变屏幕像素之前就执行了（会推迟页面显示的事件...useImperativeMethods 自定义使用ref时公开给父组件的实例值 useMutationEffect 更新兄弟组件之前，它在React执行其DOM改变的同一阶段同步触发 useLayoutEffect...，使用CreatePortal 将组件堆栈添加到其开发警告中，使开发人员能够隔离bug并调试其程序，这可以清楚地说明问题所在，并更快地定位和修复错误。...如果想得到“最新”的值，可以使用 ref。 react中这两个生命周期会触发死循环 componentWillUpdate生命周期在shouldComponentUpdate返回true后被触发。...在这两个生命周期只要视图更新就会触发，因此不能再这两个生命周期中使用setState。否则会导致死循环在React中如何避免不必要的render？

8722 0

腾讯前端经典react面试题汇总

useEffect(callback, source)接受两个参数callback: 钩子回调函数；source: 设置触发条件，仅当 source 发生改变时才会触发；useEffect钩子在没有传入...source参数时，默认在每次 render 时都会优先调用上次保存的回调中返回的函数，后再重新调用回调；useEffect(() => { // 组件挂载后执行事件绑定 console.log...用法与useEffect类似，只是区别于执行时间点的不同useEffect属于异步执行，并不会等待 DOM 真正渲染后执行，而useLayoutEffect则会真正渲染后才触发；可以获取更新后的 state...React实际上并没有将事件附加到子节点本身。而是通过事件委托模式，使用单个事件监听器监听顶层的所有事件。这对于性能是有好处的。这也意味着在更新DOM时， React不需要担心跟踪事件监听器。...这个生命周期函数是为了替代componentWillReceiveProps存在的，所以在需要使用componentWillReceiveProps时，就可以考虑使用getDerivedStateFromProps

2.1K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云