React 中的 Modal 组件：一步一步构建灵活性交互

2023-10-09 21:27:56

前言

Modal 组件在现代应用中扮演着重要的角色，它允许我们在现有界面的基础上弹出一个新窗口，用于显示更多信息、收集用户输入或提供交互操作。React 作为当下最流行的前端框架之一，提供了丰富的组件库和便捷的开发体验。接下来，我们将一步步带您构建一个基于 React 的 Modal 组件，让您轻松实现灵活的交互效果。

一、环境搭建

创建 React 项目
```
npx create-react-app modal-component
```

安装依赖库

npm install --save react-transition-group

二、Modal 样式完善

import React from "react";
import { CSSTransition } from "react-transition-group";

export default function Modal(props) {
  const { show, children } = props;

  return (
    <CSSTransition
      in={show}
      timeout={300}
      classNames="modal"
      unmountOnExit
    >
      <div className="modal-content">{children}</div>
    </CSSTransition>
  );
}

三、Modal 功能开发

// 显示/隐藏 Modal
const [showModal, setShowModal] = useState(false);

const handleShowModal = () => {
  setShowModal(true);
};

const handleCloseModal = () => {
  setShowModal(false);
};

return (
  <div>
    <button onClick={handleShowModal}>Open Modal</button>
    <Modal show={showModal} onClose={handleCloseModal}>
      <div>Modal Content</div>
      <button onClick={handleCloseModal}>Close Modal</button>
    </Modal>
  </div>
);