Ant Design + React Hooks 二次封装弹窗组件指南

前端

2024-01-11 11:14:47

在软件开发中，弹窗组件是一种常见的 UI 元素，它可以用来显示重要信息、收集用户输入或提供其他交互功能。Ant Design 是一个流行的 React UI 库，它提供了丰富的组件库，包括弹窗组件。

React Hooks 是一个新的 React 特性，它允许您在函数组件中使用 state 和生命周期方法。这使得函数组件更加强大和灵活，也更容易编写。

在这个指南中，我们将使用 Ant Design 和 React Hooks 来二次封装一个弹窗组件。我们将创建一个自定义组件，它将封装 Ant Design 的 Modal 组件，并提供一些额外的功能，如标题、内容和按钮。

前提条件

在开始之前，您需要确保已经安装了以下软件：

Node.js
npm
React
Ant Design

如果您还没有安装这些软件，请参考以下链接：

创建 React 项目

首先，我们需要创建一个新的 React 项目。您可以使用以下命令来创建一个新的项目：

npx create-react-app my-app

这将创建一个名为 my-app 的新项目。

安装 Ant Design

接下来，我们需要安装 Ant Design。您可以使用以下命令来安装 Ant Design：

npm install antd

创建自定义弹窗组件

现在，我们可以开始创建自定义弹窗组件了。在 src 目录下，创建一个新的文件 MyModal.js。

import React, { useState } from "react";
import { Modal } from "antd";

const MyModal = (props) => {
  const [visible, setVisible] = useState(false);

  const showModal = () => {
    setVisible(true);
  };

  const handleCancel = () => {
    setVisible(false);
  };

  return (
    <>
      <button type="button" onClick={showModal}>
        Open Modal
      </button>
      <Modal
        title={props.title}
        visible={visible}
        onCancel={handleCancel}
        footer={props.footer}
      >
        {props.content}
      </Modal>
    </>
  );
};

export default MyModal;

这个组件很简单，它包含了一个按钮，当用户点击按钮时，它会显示一个弹窗。弹窗的标题、内容和按钮都是通过 props 传递的。

使用自定义弹窗组件

现在，我们可以使用自定义弹窗组件了。在 App.js 文件中，导入 MyModal 组件，并将其渲染到页面上。

import React from "react";
import MyModal from "./MyModal";

const App = () => {
  return (
    <div className="App">
      <h1>Hello World!</h1>
      <MyModal
        title="My Modal"
        content="This is the content of the modal."
        footer={[
          <button key="submit" type="primary">
            Submit
          </button>,
          <button key="cancel" type="default" onClick={handleCancel}>
            Cancel
          </button>,
        ]}
      />
    </div>
  );
};

export default App;