對antd的Modal改造

piglei 發布于2019-08-23 12:48 / 2079人閱讀

摘要：直接傳入和原來的，而不傳入，讓處理自己的數據就可以刪除

直接傳入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);
}

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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