内容参考知乎 程墨
Portals 是什么
翻译过来是传送门,就是将你的Dom节点传送到你指定的地方,现在这么说你可能还是不清晰,我们举个例子。
假如你现在在业务中,signal组件中点击后想弹出一个弹窗,但是你的弹窗又不能写在signal组件中,因为你的这个组件中可能有一些样式 比如最外层overflow:hidden,你的弹窗会被隐藏掉,我们需要将弹窗组件放在最外层document,你会怎么做? 事件监听?redux? 感觉有点大材小用了,本来很简单的操作弄的项目很复杂。
Portals 如何使用
为了解决上面的问题,React v16增加了对Portal的直接支持。
首页我们创建dom节点,然后将节点放在body中,然后通过createPortal将弹窗渲染在我们创建的节点中。
然后在我们上面说到的signal组件中,在适当的时机挂载就可以了,你会发现你的弹窗会放在body标签的最后面,传送门 嗖的一下就传送过去了,是不是很神奇,很好用。