react怎样手写动态弹窗

不得不说antd里面的Modal已经很好用，符合大部分场景的需求了。但是如果你需要自己手写一个Modal，你会怎么写呢？

当然是照着Modal抄，然后加上自己需要的功能咯！我们打开控制台，会发现Modal弹出以后，body会增加一个div子元素。

好了我们怎么凭空给body增加子元素呢？
首先创建一个div element,然后append到body里面，copy下面两句话在控制台执行会发现body就增加了一个空的div元素啦。

const divEl = document.createElement('div');

document.body.appendChild(divEl);

然后我们需要往这个div里面填充内容对不对，怎么填充呢？哈哈，利用jsx和reactDom的render功能

ReactDOM.render(<div>aaaaaa</div>, divEl);

这个<div>aaaaaa</div>是一个简单的jsx对象示例。当然如果你执行这个的话，只是把这个放在了文档的最下面，还不是弹框啊。弹框的内容和样式要放在这个jsx里面。

copy一个别人的弹框样式

const ROOT = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  .bgc {
    position: fixed;
    z-index: 110;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
  }
  .titles {
    background-color: #fff;
    font-size: 12px;
    position: fixed;
    z-index: 120;
    width: 240px;
    height: 120px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: black;
  }
  .titles > p {
    margin: 20px 15px;
  }
  .titles > div {
    background-color: rgb(76, 116, 242);
    color: #fff;
    width: 80px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    margin: 0 auto;
    border-radius: 4px;
    cursor: pointer;
  }
`;

<ROOT className="bgcBox">
      <div className="bgc"></div>
      <div className="titles">
        <p>继续!</p>
        <div>我知道了</div>
      </div>
    </ROOT>

属性visible应用做成state，这样可以动态控制这个弹框的可见性。还有点击ok的操作等等，啊，要抄袭别的人也是件很困难的事情啊，先写到这儿吧。