React中如何为可复用DialogBox组件实现预定义常量接口？

没问题！我来帮你实现这个带有预定义常量的DialogBox组件，完全符合你的需求——只需要一次导入，就能用DialogBox.TYPE.YES_NO或DialogBox.TYPE.OK来指定对话框类型，不用再手动写字符串常量啦。

完整实现代码（JavaScript + PropTypes） #

这是最常用的函数组件实现方式，同时加入了属性校验来确保传入的值合法：

import React from 'react';
import PropTypes from 'prop-types';

const DialogBox = ({ type, message, title, onYes, onNo, onOk }) => {
  // 根据type渲染对应的按钮组
  const renderButtons = () => {
    switch (type) {
      case DialogBox.TYPE.YES_NO:
        return (
          <>
            <button onClick={onYes}>是</button>
            <button onClick={onNo}>否</button>
          </>
        );
      case DialogBox.TYPE.OK:
        return <button onClick={onOk}>确定</button>;
      default:
        // 非法类型时给出警告并默认显示确定按钮
        console.warn(`无效的DialogBox类型: ${type}, 已默认切换为'ok'类型`);
        return <button onClick={onOk}>确定</button>;
    }
  };

  return (
    <div className="dialog-box">
      <div className="dialog-title">{title}</div>
      <div className="dialog-message">{message}</div>
      <div className="dialog-buttons">{renderButtons()}</div>
    </div>
  );
};

// 定义静态常量TYPE，挂载到组件对象上
DialogBox.TYPE = {
  YES_NO: 'yesNo',
  OK: 'ok'
};

// 属性校验：确保必填属性存在，且type是预定义的合法值
DialogBox.propTypes = {
  type: PropTypes.oneOf(Object.values(DialogBox.TYPE)).isRequired,
  message: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  onYes: PropTypes.func,
  onNo: PropTypes.func,
  onOk: PropTypes.func
};

// 给回调函数设置默认空函数，避免未传入时触发报错
DialogBox.defaultProps = {
  onYes: () => {},
  onNo: () => {},
  onOk: () => {}
};

export default DialogBox;

如何调用组件 #

只需要一次导入，就能用预定义常量指定类型，完全符合你的预期：

import DialogBox from './DialogBox.js';

const YourParentComponent = () => {
  const handleConfirm = () => {
    console.log('用户确认了操作');
    // 这里可以添加关闭对话框、执行业务逻辑等代码
  };

  const handleCancel = () => {
    console.log('用户取消了操作');
  };

  const handleOk = () => {
    console.log('用户点击了确定');
  };

  return (
    <div>
      {/* 是/否类型对话框 */}
      <DialogBox
        type={DialogBox.TYPE.YES_NO}
        title="确认删除"
        message="你确定要删除这条数据吗？"
        onYes={handleConfirm}
        onNo={handleCancel}
      />

      {/* 确定类型对话框 */}
      <DialogBox
        type={DialogBox.TYPE.OK}
        title="操作成功"
        message="数据已成功保存！"
        onOk={handleOk}
      />
    </div>
  );
};

export default YourParentComponent;

额外福利：TypeScript版本（类型更严格） #

如果你的项目用TypeScript，这个版本会提供更强大的类型检查，还能在IDE里自动提示可选类型：

import React from 'react';

// 定义枚举类型，确保类型值唯一
export enum DialogBoxType {
  YES_NO = 'yesNo',
  OK = 'ok'
}

// 定义组件props的类型接口
interface DialogBoxProps {
  type: DialogBoxType;
  message: string;
  title: string;
  onYes?: () => void;
  onNo?: () => void;
  onOk?: () => void;
}

// 给组件添加TYPE属性的类型声明
const DialogBox: React.FC<DialogBoxProps> & { TYPE: typeof DialogBoxType } = ({
  type,
  message,
  title,
  onYes = () => {},
  onNo = () => {},
  onOk = () => {}
}) => {
  const renderButtons = () => {
    switch (type) {
      case DialogBoxType.YES_NO:
        return (
          <>
            <button onClick={onYes}>是</button>
            <button onClick={onNo}>否</button>
          </>
        );
      case DialogBoxType.OK:
        return <button onClick={onOk}>确定</button>;
      default:
        // 穷尽检查：如果有新类型未添加，编译器会报错
        const _exhaustiveCheck: never = type;
        throw new Error(`未知的DialogBox类型: ${_exhaustiveCheck}`);
    }
  };

  return (
    <div className="dialog-box">
      <div className="dialog-title">{title}</div>
      <div className="dialog-message">{message}</div>
      <div className="dialog-buttons">{renderButtons()}</div>
    </div>
  );
};

// 挂载TYPE常量到组件上
DialogBox.TYPE = DialogBoxType;

export default DialogBox;

调用方式和JS版本完全一致，而且TypeScript会自动阻止你传入非法的type值，非常省心。

内容的提问来源于stack exchange，提问作者Patryk Janik