Modal 组件的二次封装

Modal组件是常见的UI元素，在许多前端框架中都有实现，比如React、Vue、Ant Design等。二次封装Modal组件主要是为了让它更易于管理、定制和跨项目复用。以下是基本的步骤：

1. **理解原生组件**：首先你需要了解原生Modal组件的工作原理，包括它的打开、关闭逻辑，触发条件，以及可能的属性（如显示内容、大小、位置、关闭回调等）。

2. **分离样式与逻辑**：将组件的样式和业务逻辑分开，通常通过CSS-in-JS库（如styled-components或less/sass）来编写样式，而将状态管理和处理逻辑放在单独的js模块中。

3. **重构组件结构**：创建一个新的React函数组件或类组件，接收原生组件的props作为输入，然后在其内部创建和管理原生Modal的状态。这样，你可以自定义显示内容、添加额外的行为或处理异步操作。

4. **提供API**：对外提供丰富的API，让使用者可以轻松控制Modal的显示和隐藏，以及处理相关的交互事件。这可能包括show、hide、onClose等方法。

5. **测试与文档**：确保新封装的Modal组件在各种场景下都能正常工作，编写清晰的文档说明如何使用它，包括安装、配置和常见用法。

例子（简化版）:

import React from 'react';
import { Modal } from 'antd';

const EnhancedModal = ({ visible, onOk, onCancel }) => {
  const handleOk = () => {
    onOk();
    closeModal();
  };

  const handleClose = () => {
    onCancel();
    closeModal();
  };

  const closeModal = () => {
    // 关闭原生Modal
    Modal.hide();
  };

  return (
    <Modal
      title="标题"
      visible={visible}
      onOk={handleOk}
      onCancel={handleClose}
      footer={[
        <Button key="back" onClick={handleClose}>取消</Button>,
        <Button key="submit" type="primary" onClick={handleOk}>确定</Button>,
      ]}
    >
      {/* 内容 */}
    </Modal>
  );
};

// 使用示例
<EnhancedModal visible={true} onOk={() => console.log('ok clicked')} onCancel={() => console.log('cancel clicked')} />