详解使用React制作一个模态框

<Modal visible={modalVisble} onClose={this.onModalClose} />

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;

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 {
 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;
}

.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;
}

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>
  )
 }
}

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;
  }
 }
}

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();
  }
 };
 ...
}

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();
  }
 };
 ...
}

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';
 }
};