如何基于React+TypeScript+Bootstrap实现自管理状态的Dialog组件？

核心实现思路是在单个Dialog组件内做非受控状态托管+可选受控兼容，无需拆分多个内部子组件，是目前最简洁优雅的实现方案，同时还能兼顾后续扩展场景。

具体实现逻辑 #

1. 调整Props类型，区分可选的受控属性和触发器配置属性
2. 内部用useState维护私有显隐状态，外部传入isOpen时优先使用外部值，无外部传入时完全由组件内部控制
3. 内置触发器的点击事件直接操作内部状态，无需父组件参与
4. 封装通用关闭逻辑，覆盖右上角关闭按钮、底部取消按钮、保存成功后自动关闭等场景

完整TypeScript代码示例 #

import { FC, useState } from 'react';

// 弹窗底部按钮配置类型
type DialogButton = {
  text: string;
  variant?: 'primary' | 'secondary' | 'danger';
  onClick?: () => void | Promise<void>;
}

interface DialogProps {
  // 触发器配置
  icon?: string;
  triggerText?: string;
  triggerClassName?: string;
  // 弹窗基础配置
  title: string;
  buttons?: DialogButton[];
  onSave?: () => void | Promise<void>;
  // 可选受控属性，特殊场景下父组件也可以主动控显隐
  isOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
  children: React.ReactNode;
}

export const Dialog: FC<DialogProps> = (props) => {
  const {
    icon,
    triggerText,
    triggerClassName = 'btn btn-sm btn-primary',
    title,
    buttons = [],
    onSave,
    isOpen: propsIsOpen,
    onOpenChange,
    children
  } = props;

  // 内部托管的显隐状态，外部不传isOpen时生效
  const [internalIsOpen, setInternalIsOpen] = useState(false);
  const isOpen = propsIsOpen ?? internalIsOpen;

  const updateOpenState = (status: boolean) => {
    if (propsIsOpen === undefined) {
      setInternalIsOpen(status);
    }
    onOpenChange?.(status);
  };

  const handleClose = () => updateOpenState(false);
  const handleOpen = () => updateOpenState(true);

  const handleSave = async () => {
    if (onSave) await onSave();
    handleClose();
  };

  // 合并自定义按钮和默认的取消、保存按钮
  const finalButtons = [
    ...buttons,
    { text: '取消', variant: 'secondary', onClick: handleClose },
    { text: '保存', variant: 'primary', onClick: handleSave }
  ];

  return (
    <>
      {/* 自动渲染触发器 */}
      {(icon || triggerText) && (
        <button
          type="button"
          className={triggerClassName}
          onClick={handleOpen}
        >
          {icon && <i className={`bi bi-${icon}`}></i>}
          {triggerText && <span className={icon ? 'ms-1' : ''}>{triggerText}</span>}
        </button>
      )}

      {/* 基于Bootstrap Modal的弹窗实现 */}
      {isOpen && (
        <>
          <div className="modal fade show d-block" tabIndex={-1}>
            <div className="modal-dialog">
              <div className="modal-content">
                <div className="modal-header">
                  <h5 className="modal-title">{title}</h5>
                  <button type="button" className="btn-close" onClick={handleClose} aria-label="Close"></button>
                </div>
                <div className="modal-body">{children}</div>
                <div className="modal-footer">
                  {finalButtons.map((btn, idx) => (
                    <button
                      key={idx}
                      type="button"
                      className={`btn btn-${btn.variant || 'secondary'}`}
                      onClick={btn.onClick}
                    >
                      {btn.text}
                    </button>
                  ))}
                </div>
              </div>
            </div>
          </div>
          <div className="modal-backdrop fade show"></div>
        </>
      )}
    </>
  );
};

使用示例（完全符合你预期的调用方式） #

父组件无需维护任何显隐状态，开箱即用：

<Dialog
  icon="pencil"
  triggerText="编辑"
  title="编辑条目"
  onSave={async () => {
    // 此处写保存业务逻辑即可，执行完自动关闭弹窗
    await submitEditForm();
  }}
>
  <div>弹窗内容区域</div>
  <input type="text" placeholder="输入修改后的内容" />
</Dialog>

方案优势 #

• 对外仅暴露单个Dialog组件，调用方式符合你的预期
• 默认完全内部管理状态，父组件不需要做额外的状态维护
• 保留了受控扩展能力，后续有特殊场景需要父组件主动控制弹窗显隐时，直接传入isOpen属性即可，不需要重构组件
• 支持自定义触发器样式、自定义底部按钮，灵活度可覆盖绝大多数业务场景

内容的提问来源于stack exchange，提问作者Alex 75