react奇淫意巧之 - 传送门 - react Portals

1,310 阅读1分钟

内容参考知乎 程墨

Portals 是什么

翻译过来是传送门,就是将你的Dom节点传送到你指定的地方,现在这么说你可能还是不清晰,我们举个例子。

preview

假如你现在在业务中,signal组件中点击后想弹出一个弹窗,但是你的弹窗又不能写在signal组件中,因为你的这个组件中可能有一些样式 比如最外层overflow:hidden,你的弹窗会被隐藏掉,我们需要将弹窗组件放在最外层document,你会怎么做? 事件监听?redux? 感觉有点大材小用了,本来很简单的操作弄的项目很复杂。

Portals 如何使用

为了解决上面的问题,React v16增加了对Portal的直接支持。

首页我们创建dom节点,然后将节点放在body中,然后通过createPortal将弹窗渲染在我们创建的节点中。

然后在我们上面说到的signal组件中,在适当的时机挂载就可以了,你会发现你的弹窗会放在body标签的最后面,传送门 嗖的一下就传送过去了,是不是很神奇,很好用。