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

相关推荐
柚子8169 分钟前
scroll-marker轮播组件不再难
前端·css
你的人类朋友1 小时前
🫏光速入门cURL
前端·后端·程序员
01传说1 小时前
vue3 配置安装 pnpm 报错 已解决
java·前端·vue.js·前端框架·npm·node.js
Misha韩1 小时前
React Native 一些API详解
react native·react.js
小李飞飞砖1 小时前
React Native 组件间通信方式详解
javascript·react native·react.js
小李飞飞砖1 小时前
React Native 状态管理方案全面对比
javascript·react native·react.js
烛阴2 小时前
Python装饰器解除:如何让被装饰的函数重获自由?
前端·python
千鼎数字孪生-可视化3 小时前
Web技术栈重塑HMI开发:HTML5+WebGL的轻量化实践路径
前端·html5·webgl
凌辰揽月3 小时前
7月10号总结 (1)
前端·css·css3
天天扭码3 小时前
很全面的前端面试——CSS篇(上)
前端·css·面试