使用解构赋值时如何设置依赖型默认Props？

先拆解现有两种方案的核心问题：

方案1的问题 #

方案1未修改getTextColor的类型，默认函数里虽然能拿到当前渲染的disabled值，但用户自定义传入的getTextColor完全无法获取disabled状态——原类型只允许函数接收theme一个参数，外部传入的自定义函数根本拿不到disabled，完全达不到“让getTextColor依赖disabled”的需求。此外这种写法还会造成逻辑混淆：从外部看getTextColor的签名只和主题相关，没人能想到它的结果会受disabled影响，可读性极差。

方案2的问题 #

方案2让getTextColor接收disabled参数，确实解决了依赖问题，但直接修改类型会破坏兼容性——如果之前有代码按照原类型（仅接收theme）传入getTextColor，这些代码会立刻报错。而且原ButtonProps接口的定义也必须同步修改，否则会出现类型不匹配的问题。

更优实现方案 #

我们可以在不破坏现有兼容性的前提下，实现getTextColor依赖disabled的需求，推荐两种思路：

思路1：扩展参数，兼容旧用法 #

调整ButtonProps类型，让getTextColor的第二个参数可选，既兼容旧代码，又支持新需求：

interface ButtonProps {
  onClick: () => void;
  disabled?: boolean;
  // 第二个参数可选，兼容旧的仅传theme的用法
  getTextColor?: (theme: Theme, disabled?: boolean) => string;
}

const Button = ({
  onClick,
  disabled = false,
  // 默认函数处理两种情况：未传入disabled参数时用组件当前的disabled值
  getTextColor = (theme, btnDisabled = disabled) => btnDisabled ? 'gray' : theme.primary
}: ButtonProps) => {
  const theme = useTheme();
  // 调用时传入当前的disabled状态
  const computedTextColor = getTextColor(theme, disabled);
  // 后续逻辑
};

思路2：封装参数为对象，提升扩展性 #

如果未来可能需要给getTextColor传入更多状态（比如尺寸、变体等），把参数封装成对象会更易扩展：

// 定义参数类型，方便后续扩展
interface GetTextColorParams {
  theme: Theme;
  disabled: boolean;
}

interface ButtonProps {
  onClick: () => void;
  disabled?: boolean;
  getTextColor?: (params: GetTextColorParams) => string;
}

const Button = ({
  onClick,
  disabled = false,
  getTextColor = ({ theme, disabled }) => disabled ? 'gray' : theme.primary
}: ButtonProps) => {
  const theme = useTheme();
  const computedTextColor = getTextColor({ theme, disabled });
  // 后续逻辑
};

这种写法的优势在于，后续新增参数时只需修改GetTextColorParams接口，无需调整函数参数列表，不会破坏现有调用逻辑，可读性和扩展性更强。

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