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的组件树结构.

相关推荐
岁忧1 小时前
(LeetCode 面试经典 150 题 ) 11. 盛最多水的容器 (贪心+双指针)
java·c++·算法·leetcode·面试·go
一斤代码1 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子1 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年1 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_3 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
甜瓜看代码3 小时前
1.
react.js·node.js·angular.js
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js