React 封装可定制的 Modal 模态对话框

前端

2023-09-19 14:51:43

React Modal 模态对话框：提升你的 Web 应用交互性

引言

React Modal 模态对话框是一种强大的组件，可以为你的 Web 应用增添交互性和响应性。通过创建一个可定制的模态对话框，你可以引导用户操作、展示重要信息或确认操作，从而显著提升用户体验。

创建 React Modal 组件

要创建 React Modal 组件，请遵循以下步骤：

安装依赖项： 使用 npm 安装 react-modal 库：npm install react-modal --save。
创建 Modal 组件： 在你的项目中创建一个名为 Modal 的新组件。该组件将包含模态对话框的所有逻辑。
定义状态： 使用 useState 钩子定义一个状态变量 isOpen，用于跟踪模态对话框是否打开。
定义打开和关闭函数： 定义两个函数 openModal 和 closeModal，分别用于打开和关闭模态对话框。
使用 Modal 组件： 在 render() 方法中使用 Modal 组件创建模态对话框，并将 isOpen 和 onRequestClose 道具传递给它。

代码示例：

import React, { useState } from 'react';
import { Modal, Button } from 'react-modal';

const Modal = () => {
  const [isOpen, setIsOpen] = useState(false);

  const openModal = () => {
    setIsOpen(true);
  };

  const closeModal = () => {
    setIsOpen(false);
  };

  return (
    <>
      <Button onClick={openModal}>Open Modal</Button>
      <Modal isOpen={isOpen} onRequestClose={closeModal}>
        <h2>Modal Title</h2>
        <p>Modal Content</p>
        <Button onClick={closeModal}>Close Modal</Button>
      </Modal>
    </>
  );
};

自定义 Modal 内容

你可以通过以下方式自定义模态对话框的内容：

添加一个* 添加一些文本：<p>Modal Content</p>
添加一个按钮：<Button onClick={closeModal}>Close Modal</Button>

使用 Modal 组件

一旦创建了 Modal 组件，你就可以将它添加到你的 React 应用中。你可以像使用其他任何 React 组件一样使用它。

代码示例：

import React from 'react';
import ReactDOM from 'react-dom';
import { Modal, Button } from 'react-modal';

const App = () => {
  const [isOpen, setIsOpen] = useState(false);

  const openModal = () => {
    setIsOpen(true);
  };

  const closeModal = () => {
    setIsOpen(false);
  };

  return (
    <>
      <h1>My React App</h1>
      <Button onClick={openModal}>Open Modal</Button>
      <Modal isOpen={isOpen} onRequestClose={closeModal}>
        <h2>Modal Title</h2>
        <p>Modal Content</p>
        <Button onClick={closeModal}>Close Modal</Button>
      </Modal>
    </>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));