react-插槽(Portals)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react-插槽(Portals)相关的知识,希望对你有一定的参考价值。

参考技术A

第一个参数(child)是任何可渲染的 React 子元素,例如一个元素,字符串或 片段(fragment)。第二个参数(container)则是一个 DOM 元素。

对于 portal 的一个典型用例是当父组件有 overflow: hidden 或 z-index 样式,但你需要子组件能够在视觉上 “跳出(break out)” 其容器。例如,对话框以及提示框。

虽然一个portal可以插入到任何一个存在dom树中,但是通过Portal节点插入到其他dom中的节点,跟其他的React普通的子节点表现相同。在父节点下,通过Portal插入的子节点也可以共享context。

对于事件冒泡,从Portal节点中触发的事件,虽然可能改变了节点所处的位置,但是在html结构中的父包含节点是可以拿到这个事件的。

在上面的HTML结构中,通过Portal, 在Button真实位置是包含在“modal-root”下,但是因为在HTML的结构中Button所在的父节点的HTML结构是包含“app-root”中的,因此在“modal-root”中出发的事件,也可以冒泡到“app-root”中。

在实际使用过程中,通过Portal,我们可以在组件渲染的任何时候向任何地方插入组件,需要确保的是被插入的容器是真实的DOM,即可以用document.getElementByXX 获取到的DOM。

以上是关于react-插槽(Portals)的主要内容,如果未能解决你的问题,请参考以下文章

react-插槽(Portals)

在react上实现vue的插槽slot

React拓展 - setState - 路由组件懒加载 - Hooks - Fragment - Context - PureComponent - 插槽 - 错误边界 - 组件通信方式总结(代码片

Vue的作用域插槽

在有插槽问题的 Web 组件中使用事件委托(冒泡)

11. react 组合与继承