对antd的Modal改造

piglei 发布于2019-08-23 12:48 / 2078人阅读

摘要：直接传入和原来的，而不传入，让处理自己的数据就可以删除

直接传入API和原来Modal的children，而不传入visible，让Modal处理自己的数据

import React from "react";
import ReactDOM from "react-dom";
import { Modal } from "antd";


export function newModal(options = {}, children) {
  const destroy = (node) => {
    ReactDOM.unmountComponentAtNode(node);
    const unmountResult = ReactDOM.unmountComponentAtNode(node);
    if (unmountResult && node.parentNode) { // ReactDOM.unmountComponentAtNode就可以删除
      node.parentNode.removeChild(node);
    }
  };
  const modalHas = document.getElementsByClassName("smart-modal")[0];
  if (modalHas) {
    destroy(modalHas);
  }
  const div = document.createElement("div");
  div.setAttribute("class", "smart-modal");
  const { onOk = () => { }, onCancel = () => { }, ...rest } = options;
  const handleOk = () => {
    onOk && onOk(); // eslint-disable-line
    destroy(div);
  };
  const handleCancel = () => {
    onCancel && onCancel(); // eslint-disable-line
    destroy(div);
  };
  const smModal = (
    
      {children}
    
  );
  document.body.appendChild(div);
  ReactDOM.render(smModal, div);
}

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99019.html

学习用TypeScript写React组件

摘要：为了折腾，简单的学习了下感觉确实不错。也为了不断学习，避免落伍，所以就折腾不断。既然这么多项目都提前使用了而我又是的粉，那么还是先研究下实现组件。鉴于本人也是学习，还有太多需要努力的。希望有志同学一起学习探讨。为了折腾，简单的学习了下TypeScript, 感觉确实不错。也为了不断学习，避免落伍，所以就折腾不断。前段时间用ES6，antd+dva写了一些demo, 发现an...

hzx 2019-08-20 15:52 评论0 收藏0
可能是你见过最完善的微前端解决方案

摘要：而从技术实现角度，微前端架构解决方案大概分为两类场景单实例即同一时刻，只有一个子应用被展示，子应用具备一个完整的应用生命周期。为了解决产品研发之间各种耦合的问题，大部分企业也都会有自己的解决方案。原文链接：https://zhuanlan.zhihu.com/p/... Techniques, strategies and recipes for building a modern ...

Kahn 2019-08-26 14:04 评论0 收藏0
React组件库封装初探--Modal

摘要：组件实现基本简介类似于实现的组件，首先基本结构分析遮罩层内容包装层主体内容层，包含固定定位布局，全屏遮盖显示，所以内容自定义实现功能目标两种调用方式一些内容遮罩层和的显示与否，单击是否可关闭其他必备功能结构布局攻克基本布局遮 Madal组件实现基本简介 showImg(https://segmentfault.com/img/bVbqhvl?w=1848&h=834); 类似于an...

ybak 2019-08-23 16:18 评论0 收藏0
React组件库封装初探--Modal

摘要：组件实现基本简介类似于实现的组件，首先基本结构分析遮罩层内容包装层主体内容层，包含固定定位布局，全屏遮盖显示，所以内容自定义实现功能目标两种调用方式一些内容遮罩层和的显示与否，单击是否可关闭其他必备功能结构布局攻克基本布局遮 Madal组件实现基本简介 showImg(https://segmentfault.com/img/bVbqhvl?w=1848&h=834); 类似于an...

codecraft 2019-08-02 16:08 评论0 收藏0