React前端面试每日一试 8.什么是React Portals?

在React中,Portals 是一种技术,允许你将组件的子节点 渲染到父组件DOM层次结构之外的DOM 节点中。通常,React组件会按照嵌套结构渲染其子节点,但在某些情况下,我们希望将组件内容放置在DOM的其他位置,比如模态框工具提示弹出菜单等。React Portals正是为这种需求提供了解决方案。

为什么使用React Portals?

当我们需要将组件内容渲染在特定的DOM节点中,但这个节点不在父组件的DOM树内时,Portals提供了理想的方式。例如,当我们需要在页面的顶部渲染一个模态框,而模态框的触发按钮却在页面的底部。传统的嵌套方式可能会受到CSS的z-index、overflow属性等限制,而使用Portals可以轻松地将模态框渲染到根节点或者其他不受限制的位置。

如何使用React Portals?

使用React Portals非常简单。你只需调用 ReactDOM.createPortal (child, container) 方法,其中 child 是要渲染的React节点,container 是你希望渲染内容的DOM节点。

javascript 复制代码
import ReactDOM from 'react-dom';

function Modal({ children }) {
  return ReactDOM.createPortal(
    <div className="modal">
      {children}
    </div>,
    document.getElementById('modal-root') // 将内容渲染到 #modal-root 节点
  );
}

在上面的例子中,Modal 组件中的内容将被渲染到 #modal-root 这个DOM节点中,而不是嵌套在其父组件的DOM结构中。

使用场景

  1. 模态框 (Modal)
  2. 工具提示 (Tooltip)
  3. 弹出菜单 (Dropdown Menu)

这些场景通常需要突破父组件的DOM边界,使其在页面的其他部分渲染,React Portals为此提供了一个优雅的解决方案。

注意事项

虽然Portals允许组件在视觉上脱离父组件,但事件冒泡仍然会遵循React的组件树结构。也就是说,即使组件通过Portal渲染到不同的DOM节点中,其事件仍然会向上传递到父组件。

事件冒泡示例场景

例如,有一个通过Portal渲染的模态框组件,当你在模态框内部点击一个按钮时,尽管这个模态框的DOM结构在页面的顶层(例如body下),但事件冒泡路径还是会从子组件到父组件(即原来的React组件树结构),而不会直接跳过中间的React组件

总结

React Portals 是一种强大的工具,尤其在处理UI组件时,使你能够灵活地管理DOM节点的渲染位置,而不受限于React组件树的嵌套关系。通过合理使用Portals,你可以更轻松地构建复杂的UI组件,提高应用的用户体验.

PS:但事件冒泡仍然会遵循React的组件树结构.

相关推荐
索迪迈科技8 小时前
CommonJS与ES6模块的区别
前端·ecmascript·es6
前端Hardy8 小时前
12个被低估的 CSS 特性,让前端开发效率翻倍!
前端·javascript·css
前端Hardy8 小时前
HTML&CSS:精美的3D折叠卡片悬停效果
前端·javascript·css
nightunderblackcat8 小时前
新手向:中文语言识别的进化之路
前端·javascript·easyui
Spider_Man9 小时前
打造属于你的前端沙盒 🎉
前端·typescript·github
用户47949283569159 小时前
🤫 你不知道的 JavaScript:`"👦🏻".length` 竟然不是 1?
前端·javascript·面试
掘金一周9 小时前
凌晨零点,一个TODO,差点把我们整个部门抬走 | 掘金一周 9.11
前端·人工智能·后端
沐怡旸9 小时前
【底层机制】稀疏文件--是什么、为什么、好在哪、实现机制
c++·面试
用户8174413427489 小时前
kubernetes核心概念 Service
前端
xingkongv9 小时前
从“调接口仔”到“业务合伙人”:前端的 DDD 初体验
javascript·前端框架