当前位置：首页 > React

实现对话框react

2026-01-27 09:30:08React

使用 React 创建对话框组件

创建一个基础的对话框组件需要管理状态、渲染内容以及处理用户交互。以下是实现对话框的几种方法。

方法一：使用 React 状态管理对话框

通过 useState 控制对话框的显示与隐藏，结合条件渲染实现对话框的开关逻辑。

import React, { useState } from 'react';

function Dialog({ isOpen, onClose, children }) {
  if (!isOpen) return null;

  return (
    <div className="dialog-overlay">
      <div className="dialog-content">
        {children}
        <button onClick={onClose}>Close</button>
      </div>
    </div>
  );
}

function App() {
  const [isDialogOpen, setIsDialogOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsDialogOpen(true)}>Open Dialog</button>
      <Dialog 
        isOpen={isDialogOpen} 
        onClose={() => setIsDialogOpen(false)}
      >
        <h3>Dialog Title</h3>
        <p>Dialog content goes here.</p>
      </Dialog>
    </div>
  );
}

方法二：使用第三方库（如 React Modal）

对于更复杂的需求（如动画、无障碍支持），可以使用 react-modal 等库。

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

Modal.setAppElement('#root'); // 无障碍支持

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsModalOpen(true)}>Open Modal</button>
      <Modal
        isOpen={isModalOpen}
        onRequestClose={() => setIsModalOpen(false)}
        contentLabel="Example Modal"
      >
        <h3>Modal Title</h3>
        <p>Modal content goes here.</p>
        <button onClick={() => setIsModalOpen(false)}>Close</button>
      </Modal>
    </div>
  );
}

方法三：自定义对话框样式与动画

通过 CSS 和过渡效果增强对话框的交互体验。

// Dialog.js
import React from 'react';
import './Dialog.css';

function Dialog({ isOpen, onClose, children }) {
  return (
    <div className={`dialog-overlay ${isOpen ? 'open' : ''}`}>
      <div className="dialog-content">
        {children}
        <button onClick={onClose}>Close</button>
      </div>
    </div>
  );
}

// Dialog.css
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.dialog-overlay.open {
  opacity: 1;
  visibility: visible;
}

.dialog-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  max-width: 500px;
  width: 100%;
}

方法四：使用 Context 全局管理对话框

对于需要在多个组件中调用的对话框，可以使用 Context 提供全局访问。

import React, { createContext, useContext, useState } from 'react';

const DialogContext = createContext();

function DialogProvider({ children }) {
  const [dialog, setDialog] = useState({
    isOpen: false,
    content: null,
  });

  const openDialog = (content) => {
    setDialog({ isOpen: true, content });
  };

  const closeDialog = () => {
    setDialog({ isOpen: false, content: null });
  };

  return (
    <DialogContext.Provider value={{ openDialog, closeDialog }}>
      {children}
      {dialog.isOpen && (
        <div className="dialog-overlay">
          <div className="dialog-content">
            {dialog.content}
            <button onClick={closeDialog}>Close</button>
          </div>
        </div>
      )}
    </DialogContext.Provider>
  );
}

function useDialog() {
  return useContext(DialogContext);
}

function App() {
  return (
    <DialogProvider>
      <ChildComponent />
    </DialogProvider>
  );
}

function ChildComponent() {
  const { openDialog } = useDialog();

  return (
    <button onClick={() => openDialog(<p>Dialog content from context</p>)}>
      Open Dialog
    </button>
  );
}