React组件中如何设置复杂类型属性的默认值？

你的思路方向是对的，但可能因为部分属性覆盖时的深层合并缺失，导致你误以为默认值未生效。以下是具体分析和优化方案：

一、两种写法的合理性 #

你尝试的两种写法都是React中设置复杂类型属性默认值的正确思路：

• 第一种直接在解构赋值中定义对象默认值，适合结构简单的场景，逻辑清晰直观。
• 第二种将默认值抽离为独立常量，更利于维护（尤其是默认值结构复杂或需要多处复用的情况），同样是合规写法。

二、可能导致"默认值失效"的原因 #

当父组件传递prepend的部分属性时（比如只传{ background: "bg-warning" }），解构赋值的默认值会被全量替换，而非深层合并。此时prepend.icon会变成undefined，进而导致渲染Icon组件时报错，让你误以为默认值没起作用。

三、优化方案：手动深层合并默认值 #

要解决这个问题，需要在组件内部对传入值和默认值进行深层合并，确保嵌套属性不会丢失：

// 定义默认值常量
const defaultPrepend = {
  background: "bg-success",
  icon: {
    style: "fas",
    name: "fa-user",
    size: "fa-lg",
  }
};

export default function ListItem({
  hasPrepend = false,
  prepend = {}, // 先设为空对象，后续合并
  children,
}) {
  // 深层合并默认值与传入值
  const mergedPrepend = {
    ...defaultPrepend,
    ...prepend,
    icon: {
      ...defaultPrepend.icon,
      ...prepend.icon // 合并icon的嵌套属性
    }
  };

  return(
    <div>
      {hasPrepend && (
        <div className={mergedPrepend.background}>
          <Icon 
            style={mergedPrepend.icon.style} 
            name={mergedPrepend.icon.name}
            size={mergedPrepend.icon.size}
          />
        </div>
      )}
      <div>{children}</div>
    </div>
  );
}

四、补充注意事项 #

• 如果嵌套层级更深，建议使用专门的深层合并工具（如Lodash的_.merge），避免手动多层展开的冗余代码。
• 不要直接修改默认对象（比如prepend.icon.size = "fa-lg"）：第一种写法的默认对象会在组件每次渲染时重新创建，第二种写法的默认对象是共享常量，修改会引发意外的副作用。

内容的提问来源于stack exchange，提问作者ben-rinehart