react手写弹窗，在同一个遮罩层显示两个弹窗

实现思路

原来想在antd的Modal框进行二次封装，发现antd的Modal不能取消掉遮罩层，只好手写。先写一个遮罩层，在遮罩层内写内容，这时候会有层级问题，所以要设置内容的层级比遮罩层层级更高。

实现遮罩层

写一个组件，visible控制遮罩层是否显示，state数据，traceModal弹窗1的点击时间，modalDeal弹窗2的点击事件

const CustomModal = ({
    visible, state, traceModal, modalDeal}) => {
   
	<div className={
   visible ? s.modalShow : s.modalDeal}>
	</div>
}

.modalShow{
   
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999; 
  }
 .modal{
   
  display: none;
}

实现内容展示层级

如果多个相同的弹窗内容可以循环展示出来，我这里两个弹窗内容原本相差较大，所以分开写。

const CustomModal = ({
    visible, state, traceModal, modalDeal}) => {
   
	<div className={
   visible ? s.modalShow : s.modalDeal}>
	<div className=