React 模态框的秘密和渐进式构建轮子的艺术

2024-02-15 19:34:04

React 模态框的设计与实现

React 模态框，本质上是一种在应用界面上弹出覆盖一层遮罩的窗口，用于展示重要信息、提示用户操作或收集用户输入等。在 React 框架中，我们可以通过多种方式实现模态框，包括使用第三方组件库、自己构建组件等。

使用第三方组件库

目前有很多流行的 React 组件库提供了模态框组件，如 Ant Design、Material-UI 等。这些组件库提供了开箱即用的模态框组件，开发者只需按照组件库的使用说明进行配置即可快速集成到项目中。

例如，在 Ant Design 中，我们可以使用 Modal 组件实现模态框。

import { Modal } from 'antd';

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

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

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

  return (
    <div>
      <Button type="primary" onClick={showModal}>Open Modal</Button>
      <Modal
        title="Modal Title"
        visible={visible}
        onCancel={handleCancel}
        footer={[
          <Button key="back" onClick={handleCancel}>
            Return
          </Button>,
          <Button key="submit" type="primary" onClick={handleCancel}>
            Submit
          </Button>,
        ]}
      >
        <p>Some contents...</p>
      </Modal>
    </div>
  );
};

export default App;

自己构建组件

如果开发者需要更加定制化的模态框组件，也可以选择自己构建。这需要开发者对 React 组件的构建原理有充分的了解，并能够熟练地使用 React 的 API。

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

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

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

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

  return (
    <div>
      <Button type="primary" onClick={showModal}>Open Modal</Button>
      {visible && (
        <div className="modal-backdrop">
          <div className="modal-content">
            <div className="modal-header">
              <h5 className="modal-title">{props.title}</h5>
              <button type="button" className="close" onClick={handleCancel}>
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div className="modal-body">
              {props.children}
            </div>
            <div className="modal-footer">
              <button type="button" className="btn btn-secondary" onClick={handleCancel}>
                Close
              </button>
              <button type="button" className="btn btn-primary" onClick={handleCancel}>
                Save changes
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default Modal;