如何在React+TypeScript中根据其他Props设置可选/必选属性

要实现「根据type值决定icon是否必传」的约束，最直接的方式是用TypeScript的联合类型拆分不同按钮类型对应的Props结构，让编译器自动帮你校验参数是否合法。

步骤1：重构Props类型定义 #

把原来单一的Props类型拆分成对应不同type的子类型，再通过联合类型整合：

import React from 'react';

// 提取公共属性，避免重复定义
type BaseButtonProps = {
  onClick: () => void;
  label?: string;
};

// 文本按钮：icon可选
type TextButtonProps = BaseButtonProps & {
  type: 'text';
  icon?: React.ReactNode;
};

// 带图标按钮：icon必须传入
type IconButtonProps = BaseButtonProps & {
  type: 'icon';
  icon: React.ReactNode;
};

// 仅图标按钮：icon必须传入
type IconOnlyButtonProps = BaseButtonProps & {
  type: 'iconOnly';
  icon: React.ReactNode;
};

// 整合所有合法的Props类型
type ButtonWrapperProps = TextButtonProps | IconButtonProps | IconOnlyButtonProps;

这样定义后，当你传入type="icon"或type="iconOnly"时，TypeScript会强制要求你提供icon属性；而type="text"时，icon则是可选的。

步骤2：修正组件代码 #

顺便修正原代码里的拼写错误（rendorButton改为renderButton），并优化逻辑：

// 假设你使用的是Material-UI的Button组件，根据实际情况替换
import { Button, IconButton } from '@mui/material';

export const ButtonContainer = (props: ButtonWrapperProps) => {
  const {
    type = 'text',
    onClick,
    icon,
    label = '',
  } = props;

  const renderButton = () => {
    switch (type) {
      case 'text':
        return <Button onClick={onClick}>{label}</Button>;
      case 'iconOnly':
        return <IconButton onClick={onClick}>{icon}</IconButton>;
      case 'icon':
        return <Button onClick={onClick} startIcon={icon}>{label}</Button>;
      default:
        // 联合类型已经覆盖所有合法type，这里仅作兜底
        throw new Error(`不支持的按钮类型：${type}`);
    }
  };

  return <>{renderButton()}</>;
};

使用示例（自动校验） #

现在使用组件时，不符合约束的写法会直接在编译阶段报错：

// ✅ 合法：文本按钮，icon可选
<ButtonContainer type="text" onClick={() => console.log('点击文本按钮')} label="普通文本按钮" />

// ✅ 合法：带图标按钮，必传icon
<ButtonContainer type="icon" onClick={() => console.log('点击带图标按钮')} label="带图标按钮" icon={<DeleteIcon />} />

// ✅ 合法：仅图标按钮，必传icon
<ButtonContainer type="iconOnly" onClick={() => console.log('点击仅图标按钮')} icon={<DeleteIcon />} />

// ❌ 编译报错：icon类型缺少必填的icon属性
<ButtonContainer type="icon" onClick={() => {}} label="缺少icon" />

// ❌ 编译报错：iconOnly类型缺少必填的icon属性
<ButtonContainer type="iconOnly" onClick={() => {}} />

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