React组件实例化时能否仅修改默认Props对象的单个属性？

问题场景 #

假设我们有这样一个React组件，它的heading Props默认是一个包含多个键的对象：

export default function PageHeader({
  heading = {
    options: "",
    customStyles: {},
    text: ""
  }
}) {
  return (
      <h1 className={heading.options} style={heading.customStyles}>
        {heading.text}
      </h1>
  );
}

现在想只修改heading对象里的text值，其余保持默认，你提到的两种写法都不可行：

为什么你的两种写法不行？ #

• 第一种写法<PageHeader heading = {...heading, text: 'New Text'} />：这里的heading变量在父组件中并未定义，直接展开会抛出引用错误，父组件没有可复用的子组件默认heading对象。
• 第二种写法<PageHeader heading.text='New Text' />：React不支持这种嵌套属性的传参方式，组件最终会接收到一个名为heading.text的独立Prop，而非修改heading对象内部的text字段，完全达不到预期效果。

可行的解决方案 #

方案1：父组件手动合并默认值（不推荐，维护麻烦）

在父组件中复制一份子组件的heading默认值，再通过展开语法修改需要的键：

// 父组件代码
const defaultHeading = {
  options: "",
  customStyles: {},
  text: ""
};

<PageHeader heading={{ ...defaultHeading, text: 'New Text' }} />

缺点：子组件默认值更新时，父组件必须同步修改，容易出现不一致。

方案2：子组件内部处理默认值合并（推荐）

修改子组件的Props解构逻辑，单独为对象内的每个字段设置默认值，这样父组件只需传入要修改的部分即可：

// 修改后的子组件
export default function PageHeader({
  heading = {},
}) {
  // 单独为每个字段设置默认值
  const {
    options = "",
    customStyles = {},
    text = ""
  } = heading;

  return (
      <h1 className={options} style={customStyles}>
        {text}
      </h1>
  );
}

// 父组件调用方式（仅修改text）
<PageHeader heading={{ text: 'New Text' }} />

方案3：拆分为独立Props（更推荐，可读性更高）

直接把对象中的每个键拆成独立的Props，每个Props单独设置默认值，这是React中更常见的写法，可读性和维护性都更好：

// 拆分后的子组件
export default function PageHeader({
  headingOptions = "",
  headingCustomStyles = {},
  headingText = ""
}) {
  return (
      <h1 className={headingOptions} style={headingCustomStyles}>
        {headingText}
      </h1>
  );
}

// 父组件调用方式（仅传需要修改的字段）
<PageHeader headingText='New Text' />

总结 #

不需要传入完整的heading对象，通过修改子组件的Props处理逻辑，或者直接拆分独立Props，就能实现仅修改单个键值、其余保持默认的需求。拆分独立Props的方式在团队协作和长期维护中优势更明显。

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