Portal 是 React 16 中的新功能，就像它的名称传送门一样，这个功能的作用就是将组件的 DOM 嗖的一下传送到另外一个地方，换句话说就是可以让你的组件渲染到其他地方，而不仅仅是在父组件中。从上面的描述中，我们知道 Portal 是一个作用于 DOM 的功能，所以 Portal 就在 react-dom 这个包下，react-dom 提供了 createPortal 方法来创建 Portal，它的第一参数是 React 组件，第二个参数则是接收这个组件的 DOM 节点。
回到我们的模态框来，为了方便的使用 Portal，我们首先创建一个 ModalPortal 组件，该组件会首先使用 createElement 创建一个表示 overlay 的 div，并使用 appendChild 将此 div 插入到 body 的末尾中，然后在 render 中，使用 createPortal 将 ModalPortal 接受的所有子组件送入 overlay 这个 div 中。通过这种方式，我们就把模态框组件变成 body 中的顶层元素了。
由于 overlay 是手动创建的 DOM 元素，所以当 visible 发生变化时，我们需要使用 DOM API 来控制 overlay 的显示和隐藏，所以我们在 ModalPortal 组件的 componetDidMount 和 componetDidUpdate 两个生命周期中，根据 visible 的值来增删 overlay 的 visible 类控制 overlay 的显示/隐藏。
import React, { PureComponent } from 'react'; import { createPortal } from 'react-dom' class ModalPortal extends PureComponent { constructor(props) { super(props); // createElement 是一个封装后的函数，方便在创建元素时添加属性 this.node = createElement('div', { class: `modal-${random()} ${props.className}`, }); document.body.appendChild(this.node); } componentDidMount() { this.checkIfVisible(); } componentDidUpdate(prevProps) { if (prevProps.visible !== this.props.visible) { this.checkIfVisible(); } } // 控制 overlay 的显示隐藏 checkIfVisible = () => { const { visible } = this.props; if (visible) { this.node.classList.add(styles.visible); } else { this.node.classList.remove(styles.visible); } }; render() { const { children } = this.props; return createPortal(children, this.node); } } class Modal extends PureComponent { ... render() { return ( <ModalPortal className='overlay' overlay={overlay}> ... </ModalPortal> ) } }
阻止背景滚动
当我们完成上面的编码之后，我们的模态框就可以实现显示/隐藏，并且处于 body 的顶层，但是还有一个问题，那就是如果 body 内容太长出现滚动时，滚动鼠标就会发现，模态框后边的背景也在滚动，这显然不是我们希望的结果。如何应对这种情况呢？
解决办法很巧妙，就是在模态框打开时，我们给 body 添加一个 overflow: hidden 的样式让 body 不滚动，然后关闭模态框再去除这个属性。通过这样的方式，我们就是实现在模态框打开时背景不滚动的功能了。
明白来原理之后就开始修改代码了，我们首先在 constructor 中使用一个变量 savedBodyOverflow 来保持 body 原始的 overflow 值，然后修改 checkIfVisble 使之可以控制 overflow 类的增删。
class ModalPortal extends PureComponent { constructor(props) { ... this.savedBodyOverflow = document.body.style.overflow; } ... checkIfVisible = () => { const { visible } = this.props; if (visible) { this.node.classList.add(styles.visible); document.body.style.overflow = 'hidden'; } else { this.node.classList.remove(styles.visible); document.body.style.overflow = this.saveBodyOverflow; } } }
点击遮罩层关闭
点击遮罩层关闭，这个应该很容易实现，给 overlay 添加一个点击事件监听就好了，但是要注意一点就是，当你点击遮罩层中的 content 时，不应当关闭。我们先回顾一下 DOM2 事件模型中的规定的事件流，事件从 window 开始，执行捕获过程，然后到目标阶段，接着执行冒泡过程，回到 window，这个流程就导致我们如果点击了 content，overlay 同样也会触发点击事件（DOM 2 默认冒泡阶段触发事件）。针对这种情况，我们可以使用事件中提供的 path 属性，该属性描述了事件冒泡过程中从目标元素的 window 的一个路径，所以通过 path 的第一个参数，我们就可以判断这个 click 是哪个元素触发的了。
在我们的 modal 中，如果要实现点击遮罩层关闭，我们可以监听 overlay 元素的点击事件，然后通过 path 属性判断事件是否是 overlay 触发的，是否应该关闭模态框。因为 overlay 的 div 使我们自己生产的所以在 constructor 过程中就可以绑定事件了，注意在 componentWillUnMount 中要记得清除绑定，为了关闭模态框，别忘记将 onClose 通过 props 传递给 ModalPortal 组件。