如何在子组件中修改作为props接收的传入组件的属性？

方案1：调整传参逻辑（更推荐，可维护性更高） #

直接传递渲染好的JSX元素本质是固定了props的静态元素，想要灵活修改的话优先调整父组件的传参方式

父组件改成传递Icon组件本身，而不是已经实例化的JSX：

// Parent组件
const Parent = () => {
  return (
    <>
      {/* 这里传组件引用，不是<Icon /> */}
      <ChildComponent icon={Icon} />
    </>
  )
};

Child组件中自行实例化组件，即可自由传入自定义props：

const Child = ({ icon: Icon }) => {
  // 这里可以动态计算你需要的颜色
  const dynamicColor = '#f00';
  return (
    <>
      <Icon color={dynamicColor} />
    </>
  )
} 

如果需要兼容其他自定义图标的场景，也可以改传渲染函数：
父组件代码：

<ChildComponent icon={(color) => <Icon color={color} />} />

子组件代码：

const Child = ({ icon }) => {
  const dynamicColor = '#f00';
  return (
    <>
      {icon(dynamicColor)}
    </>
  )
}

方案2：使用React.cloneElement修改已有元素props（无需修改父组件逻辑） #

如果你无法改动父组件的传参逻辑，可以直接使用React内置的React.cloneElement API，它可以克隆已有的JSX元素，同时覆盖/新增props：

import { cloneElement, isValidElement } from 'react';

const Child = ({ icon }) => {
  const dynamicColor = '#f00';
  // 先判断是不是合法的React元素，避免边界情况报错
  const renderedIcon = isValidElement(icon) 
    ? cloneElement(icon, { color: dynamicColor }) 
    : icon;
  return (
    <>
      {renderedIcon}
    </>
  )
} 

注意：如果父组件传递的Icon已经显式写死了color属性，cloneElement传入的color会覆盖父组件设置的原值，优先级更高。

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