React TypeScript对象类型defaultProps设置？默认值丢失问题求助

你遇到的问题根源在于：当你传入options的部分属性时，这个传入的对象会直接覆盖组件中设置的默认options对象，而不是自动合并属性。比如你传iconType='danger'，相当于把options整个替换成了{iconType: 'danger'}，自然丢失了默认的color值。

下面是几种可行的解决方法：

方法一：合并默认值与传入的Options #

在组件内部将默认配置和用户传入的options进行合并，确保未传入的属性保留默认值。同时需要将options改为可选属性，避免用户不传时报错：

type ComponentProps = {
  title: string;
  children: JSX.Element;
  options?: { // 改为可选属性
    iconType?: string;
    color?: string;
  };
};

const Component = ({ title, children, options = {} }: ComponentProps) => {
  // 合并默认值与传入的options，传入的属性会覆盖默认值
  const mergedOptions = {
    color: '#D3A82B',
    iconType: 'alert',
    ...options
  };
  
  return <AnotherComponent color={mergedOptions.color} iconType={mergedOptions.iconType} />;
};

使用示例：

<Component title="示例" children={<div>内容</div>} options={{ iconType: 'danger' }} />
// color会保留默认值#D3A82B

方法二：将Options拆分为单独的Props #

如果options中的属性数量不多，直接把它们拆成独立的可选Props，这样每个属性都能单独设置默认值，无需处理对象合并：

type ComponentProps = {
  title: string;
  children: JSX.Element;
  iconType?: string;
  color?: string;
};

const Component = ({
  title,
  children,
  iconType = 'alert', // 单独设置默认值
  color = '#D3A82B'
}: ComponentProps) => {
  return <AnotherComponent color={color} iconType={iconType} />;
};

使用示例：

<Component title="示例" children={<div>内容</div>} iconType="danger" />
// color自动使用默认值#D3A82B

方法三：使用defaultProps（不推荐函数组件） #

虽然React函数组件也支持defaultProps，但这种方式同样无法自动合并对象属性，需要配合内部合并逻辑使用，不如前两种方法直观：

type ComponentProps = {
  title: string;
  children: JSX.Element;
  options?: {
    iconType?: string;
    color?: string;
  };
};

const Component = ({ title, children, options }: ComponentProps) => {
  const mergedOptions = {
    color: '#D3A82B',
    iconType: 'alert',
    ...options
  };
  
  return <AnotherComponent color={mergedOptions.color} iconType={mergedOptions.iconType} />;
};

// 设置defaultProps
Component.defaultProps = {
  options: {}
};

总结 #

• 若options属性较多，优先选方法一，保持Props结构清晰；
• 若属性较少，方法二更简洁易维护；
• 尽量避免在函数组件中使用defaultProps，解构赋值+合并默认值的方式更符合现代React写法。

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