美文网首页
antd-Modal.confirm

antd-Modal.confirm

作者: 依然还是或者其他 | 来源:发表于2020-05-08 00:10 被阅读0次

    前言

    在提示交互的情况下,函数式调用比组件式调用逻辑更清晰,代码也更简洁,如antd中,modal.confirm。

    antd-Modal.confirm

    在antd中,modal.confirm是使用函数调用来进行弹窗交互的。

    //使用语法
    Modal.confirm({
        title: 'Confirm',
        icon: <ExclamationCircleOutlined />,
        content: 'Bla bla ...',
        okText: '确认',
        cancelText: '取消',
      });
    

    关于Modal.confirm源码

    antd-design 版本:3.10.2,现在最新版本已经4.x了,但代码上变动不多。

    export default function confirm(config: ModalFuncProps) {
      //在body中插入个div,用于后续的弹窗的渲染
      const div = document.createElement("div");
      document.body.appendChild(div);
    
      //confirm 初始化配置
      let currentConfig = { ...config, close, visible: true } as any;
    
      //弹窗关闭函数
      function close(...args: any[]) {
        //在初始化配置上在加上弹窗的配置
        currentConfig = {
          ...currentConfig,
          visible: false,
          // 弹窗关闭隐藏后的调用,一般confirm的消息弹出,多次弹出情况较少,
          // 所以直接调用destroy进行注销
          afterClose: destroy.bind(this, ...args),
        };
        //这里判断是否是16,
        if (IS_REACT_16) {
          //隐藏渲染
          render(currentConfig);
        } else {
          //直接注销
          destroy(...args);
        }
      }
      //更新组件
      function update(newConfig: ModalFuncProps) {
        currentConfig = {
          ...currentConfig,
          ...newConfig,
        };
        render(currentConfig);
      }
      //弹窗的注销
      function destroy(...args: any[]) {
        const unmountResult = ReactDOM.unmountComponentAtNode(div);
        if (unmountResult && div.parentNode) {
          div.parentNode.removeChild(div);
        }
        const triggerCancel =
          args && args.length && args.some((param) => param && param.triggerCancel);
        if (config.onCancel && triggerCancel) {
          config.onCancel(...args);
        }
      }
    
      //弹窗的渲染
      function render(props: any) {
        // ReactDOM.render 对已经渲染过的组件是不会重复重新渲染的,是做的更新操作,
        // 具体参考ReactDOM.render源码
        ReactDOM.render(<ConfirmDialog {...props} />, div);
      }
    
      render(currentConfig);
    
      //返回注销、更新方法
      return {
        destroy: close,
        update,
      };
    }
    

    从源码中可以看出confirm其实是通过对外提供配置,然后ReactDom.render将弹框组件进行了渲染而达到的。

    相关文章

      网友评论

          本文标题:antd-Modal.confirm

          本文链接:https://www.haomeiwen.com/subject/bjwtnhtx.html