前端 - 如何二次封装antd modal并且通过方法调用？

Question

如何二次封装antd modal并且在父组件中通过方法调用？
类似下方这样的调用方式

//显示
 TestModal.show({
      title: '标题',
      content: '这是一个通过 API 调用的弹窗',
      onOk: () => {
        console.log('确定按钮被点击');
      },
      onCancel: () => {
        console.log('取消按钮被点击');
      },
    });

Answer 1

https://ant.design/components/modal-cn
官方有api直接用

Answer 2

要二次封装Ant Design（antd）的Modal组件并在父组件中通过方法调用，你可以创建一个新的React组件（例如TestModal），然后在该组件内部使用antd的Modal组件。此外，你需要使用React的状态和props或者一些全局状态管理库（如Redux或MobX）来控制Modal的显示和隐藏，以及传递props给Modal。

不过，为了简单起见，我们可以使用React的useState和useEffect来管理Modal的显示，并通过一个静态方法来显示Modal。以下是一个基本的实现示例：

import React, { useState, useEffect } from 'react';
import { Modal, Button } from 'antd';

// 定义Modal的配置props类型
interface ModalProps {
  title: string;
  content: React.ReactNode;
  onOk: () => void;
  onCancel: () => void;
}

// 定义TestModal组件
const TestModal: React.FC<{}> & { show: (props: ModalProps) => void } = (props) => {
  const [visible, setVisible] = useState(false);
  const [modalProps, setModalProps] = useState<ModalProps | null>(null);

  // 显示Modal的方法
  const showModal = (newProps: ModalProps) => {
    setVisible(true);
    setModalProps(newProps);
  };

  // 隐藏Modal的方法
  const hideModal = () => {
    setVisible(false);
  };

  // 使用useEffect监听modalProps的变化并在变化时处理
  useEffect(() => {
    if (modalProps && visible) {
      // 当modalProps不为null且visible为true时，Modal会显示
      return () => {
        // 当Modal即将卸载时，可以清理一些副作用
      };
    }
  }, [modalProps, visible]);

  // 渲染Modal
  if (visible && modalProps) {
    return (
      <Modal
        title={modalProps.title}
        visible={visible}
        onOk={modalProps.onOk}
        onCancel={modalProps.onCancel || hideModal}
        afterClose={hideModal} // Modal完全关闭后的回调
      >
        {modalProps.content}
      </Modal>
    );
  }

  // 暴露一个方法静态用于在外部调用
  TestModal.show = showModal;

  // 注意：这里TestModal组件不渲染任何内容，因为Modal的渲染逻辑在if语句中
  return null;
};

export default TestModal;

// 在父组件中使用
// ...
// 假设TestModal已经被正确导入
TestModal.show({
  title: '标题',
  content: '这是一个通过 API 调用的弹窗',
  onOk: () => {
    console.log('确定按钮被点击');
  },
  onCancel: () => {
    console.log('取消按钮被点击');
  },
});
// ...

注意，此示例中TestModal组件没有渲染任何内容，因为它是一个控制Modal显示和隐藏的逻辑容器。实际的Modal渲染逻辑是在if (visible && modalProps)语句中进行的。同时，我们通过将showModal方法作为静态属性添加到TestModal上，使得我们可以在组件外部直接调用该方法来显示Modal。

这种方法的一个限制是，它要求TestModal组件被正确导入并在其父组件的范围内被使用。如果你想要一个更加全局的Modal管理方式，你可能需要考虑使用React Context或Redux等状态管理库。