如何获取作为Prop传入组件的全部Props并实现属性覆盖？

核心实现思路 #

1. 获取原组件Props：传入的customcomp是React元素，直接通过customcomp.props就能拿到SpecialComp的所有原始属性（color、size、weight）。
2. 合并并覆盖属性：使用React.cloneElement创建新元素，传入要覆盖的属性，React会自动合并原Props和新属性——新属性会覆盖同名原属性，未指定的原属性会保留。

修正后的代码 #

首先修正父组件中的中文引号（避免语法错误）：

<MyComp customcomp={<SpecialComp color='green' size='20' weight='bold'/>} />

然后修改MyComp组件：

import React from 'react';

export const MyComp = ({customcomp}) => {
  // 可选：获取并查看原组件的所有Props
  const originalProps = customcomp.props;
  console.log('原始Props:', originalProps);

  // 克隆元素并覆盖指定属性，保留其他原始属性
  return (
    <div>
      {React.cloneElement(customcomp, {
        color: 'red',
        // 若需修改其他属性，直接添加即可，比如：size: '24'
      })}
    </div>
  );
}

扩展用法 #

如果需要基于原Props做动态修改，比如调整size的值：

{React.cloneElement(customcomp, {
  color: 'red',
  size: `${parseInt(originalProps.size) + 2}` // 将原size加2
})}

说明 #

• React.cloneElement会完整保留原元素的组件类型、子节点等信息，仅修改指定的Props。
• 最终渲染的SpecialComp会使用合并后的Props：color: 'red'（覆盖后）、size: '20'（保留原属性）、weight: 'bold'（保留原属性）。

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