详解使用React制作一个模态框
模态框是一个常见的组件，下面让我们使用 react 实现一个现代化的模态框吧。
组件设计
模态框想必大家都很熟悉，是工作中常用的组件，可以让我们填写或展示一些信息而不必打开一个新页面。在开始编码之前，我们先来了解一个 react 模态框组件应该如何设计。
react 是一个状态（数据）驱动的前端框架，一个模态框最重要的状态就是打开和关闭，visible，当 visible 为 true 时，模态框打开，反之亦然。
由于 react 所提倡的是一种声明式，组件化的开发体验，每个组件都是 状态 => 界面 的映射，所以，我们把 visible 做为模态框组件的一个 prop，通过传入 prop 来控制
模态框的显示和隐藏，同时该组件还接受一个 onclose 的 prop，用来关闭模态框。
<modal visible={modalvisble} onclose={this.onmodalclose} />
一个完整的模态框还需要标题和内容，因此，我们还需要一个 header 的 prop 来传递模态框的 header，并把 modal 组件的 children 作为模态框的内容 content。最后，我们的模态框 modal 的调用方式是这样的：
import react, { useeffect, usestate } from 'react';
import modal from './components/modal';
function app() {
const [modalvisible, setmodalvisible] = usestate(true);
const openmodal = function() { setmodalvisible(true) };
const closemodal = function() { setmodalvisible(false) };
return (
<>
<button onclick={openmodal}>click</div>
<modal visible={modalvisible} onclose={closemodal} header="create a modal">
<p>this is my content</p>
</modal>
</>
);
}
export default app;
这里使用了 hooks，请升级到最新版本的 react 来体验。
实际上，一个完整的模态框组件还应该提供一些额外的配置来方便用户使用，比如 header 和 content 的自定义样式 headerclassname，contentclassname，定制操作按钮的 footer，控制是否显示关闭按钮的 showclose 等等，
但这里为了保持教程的简单，这些简单的配置就不一一实现了，如果感兴趣可以自行练习。
确定了我们的模态框的调用方式，现在我们来总结一下完整的模态框应该具备那些特性：
- 模态框组件应该挂载在 body 的第一层中，不要将模态框放置到父组件中，因为模态框放置到父组件中很容易受到其他元素的干扰。
- 模态框显示后，模态框背后的背景不能随着鼠标滚轮而滚动。
- 点击模态框的遮罩层后，应该关闭模态框。
基础功能
上面分析玩模态框的功能后，让我们先开始实现一版最基础的模态框。从 html 结构上来讲，模态框组件分为 overlay 遮罩层和 content 内容两部分组成，其中 content 里面还应该分为 header, content, footer（这里我们没有实现）三部分组成。
所以，模态框的最基本的结构如下
import react, { purecomponent } from 'react';
class modal extends purecomponent {
render() {
const { visible, onclose, header, children } = this.props;
return (
<div classname={`overlay ${visible ? 'visible' : ''}`}>
<div classname="content">
<div classname="header">
{header}
<button onclick={onclose}>close</button>
</div>
<div classname="content">{children}</div>
</div>
</div>
);
}
}
由于 overlay 元素是模态框组件的最外层的容器，所以我们可以通过控制 overlay 的显示和隐藏（在上面的基础结构中，通过 visible 属性的值来给 overlay 添加或删除类 'visible' 来控制 ）实现模态框的打开关闭效果。在这里我们使用 display 实现控制 overlay 的显示和隐藏（这样在关闭时并没有删除该模态框，方便下次打开可以保存内容），同时 overlay 还是一个占据整个窗口的半透明暗色背景，所以 overlay 的样式应该为
.overlay {
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.3);
visibility: hidden;
}
.overlay.visible {
display: block;
visibility: visible;
}
然后就是 content 中元素的样式，都很简单，大家看一下就好了，可以根据自己的组件规范修改这些样式。
.container {
margin: 80px auto;
width: 80%;
min-height: 800px;
background: #fff;
border-radius: 4px;
}
.header {
display: flex;
justify-content: space-between;
padding: 16px;
font-size: 24px;
border-bottom: 1px solid #d3d3d3;
}
.body {
padding: 16px;
}
.closebtn {
outline: none;
border: none;
appearance: none;
font-size: 18px;
color: #d5d5d5;
cursor: pointer;
}
这样，我们最基础的一版模态框就做好了，但是这个模态框是渲染在父组件中，那么如何才能将这个模态框放到 body 下，作为顶层元素呢？我们可以使用 portal 这个 react 新提供的功能。
使用 portal 将模态框送到 body 中
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 组件。
class modalportal extends purecomponent {
constructor(props) {
...
this.node.addeventlistener('click', this.handleclick);
}
componentwillunmount() {
this.node.removeeventlistener('click', this.handleclick);
}
handleclick = e => {
const { closemodal } = this.props;
const target = e.path[0];
if (target === this.node) {
onclose();
}
};
...
}
按下 esc 关闭
上面我们实现了点击遮罩层关闭模态框，然后我们应该实现按下 esc 关闭这个功能。通点击事件一样，我们只需要监听 keydown 事件就可以了，这一次不用考虑到底是哪里触发的问题了，只要 overlay 监听到 keydown 就关闭模态框。但是这里也有一个小问题，就是 overlay 是 div，默认是监听不到 keydown 事件的，对于这个问题，我们可以给 div 添加一个 tabindex: 0 的属性，通过指定 tabindex，将 div 赋予 focusable 的能力，当模态框打开后，我们手动调用 focus 将焦点放到 overlay 上，这样就能监听到键盘事件。
const esc_key = 27;
class modalportal extends purecomponent {
constructor(props) {
...
this.node = createelement('div', {
class: `modal-${random()} ${props.classname}`,
tabindex: 0,
});
this.node.addeventlistener('keydown', this.handlekeydown);
}
componentwillunmount() {
...
this.node.removeeventlistener('keydown', this.handlekeydown);
}
checkifvisible = () => {
const { visible } = this.props;
if (visible) {
...
this.node.focus();
} else {
...
}
};
handlekeydown = e => {
const { closemodal } = this.props;
if (e.keycode === esc_key) {
closemodal();
}
};
...
}
消除滚动条导致的页面抖动
在上面的防止遮罩层后面背景滚动是通过在 body 上设置 overflow: hidden 来防止滚动，但是如果 body 已经有了滚动条，那么 overflow 属性会造成滚动条消失。滚动条在 chrome 上为 15px，打开和关闭模态框会使页面不停地对这 15px 做处理，导则页面抖动。为了防止抖动，我们可以在滚动条消失后给 body 添加 15px 的右边距，滚动条出现后在删除右边距，通过这样的方法，页面就不会发生抖动了。
因为各个浏览器的标准不一致，所以我们应该想办法计算出滚动条的宽度。为了计算出滚动条的宽度，我们可以使用 innerwidth 和 offsetwidth 这两个属性。offsetwidth 是包含边框的长度，理所当然的包含了滚动条的宽度，只需要使用 offsetwidth 减去 innerwidth，得到的差值就是滚动条的宽度了。我们可以手动创建一个隐藏的有宽度的且有滚动条的元素，然后通过这个元素来获取滚动条的宽度。
const calcscrollbarwidth = function() {
const testnode = createelement('div', {
style: 'visibility: hidden; position: absolute; width: 100px; height: 100px; z-index: -999; overflow: scroll;'
});
document.body.appendchild(testnode);
const scrollbarwidth = testnode.offsetwidth - testnode.clientwidth;
document.body.removechild(testnode);
return scrollbarwidth;
};
const preventjitter = function() {
const scrollbarwidth = calcscrollbarwidth();
if (parseint(document.documentelement.style.marginright) === scrollbarwidth) {
document.documentelement.style.marginright = 0;
} else {
document.documentelement.style.marginright = scrollbarwidth + 'px';
}
};
结语
我们上面讨论了做好一个模态框所需要考虑的技术，但是肯定还有不完善和错误的地方，所以，如果错误的地方请给我提 issue 我会尽快修正。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： Red Hat Linux 安全设置方法