基于React Hook的简单 Modal 转载

codepen.io/Kevin-Loeng…

const CreateModalTest = (props) => {
  const {children, visible, closeModal} = props;

  // 在第一次渲染时取 body 原始的 overflow 值
  const bodyOverflow = useRef(window.getComputedStyle(document.body).overflow);

  useEffect(() => { // 根据 visible 来动态修改 body 的 overflow 值
    if (visible) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = bodyOverflow.current;
    }
  }, [visible]);

  const handleClick = (event) => {
    // 点击蒙层本身时关闭模态框，点击模态框的内容时不关闭
    if (event.target === event.currentTarget) {
      closeModal();
    }
  }

  const modal = ReactDOM.createPortal(
    <div className="comp-modal-one" onClick={handleClick}>
      {children}
    </div>,
    document.body
  );

  return <div>{visible && modal}</div>;
}

使用

const modalConfig = {
   visible: modalVisible,
   closeModal: () => {
     setModalVisible(false);
   }
};

<CreateModalTest {...modalConfig}>
  <CompProjectEdit/>
</CreateModalTest>