React中函数式组件的克隆问题：子元素传递方式影响处理

为什么会出现这种差异？是否符合预期？ #

这完全是React的预期行为，核心原因在于JSX的编译逻辑：

• 当你写<div>Hello</div>时，JSX会被编译为React.createElement('div', null, 'Hello')，此时创建的React元素的type属性是字符串'div'，对应原生DOM元素。
• 当你写<Hello/>时，JSX会被编译为React.createElement(Hello, null)，这里的type属性就是你定义的函数组件Hello本身，对应自定义React组件。

React元素本身只是描述UI的普通对象：

• 原生元素的type是DOM标签名，props里包含直接传入的属性和子内容；
• 自定义组件的type是组件函数/类，props是传给这个组件的参数，而组件内部渲染的内容（比如<div>hello</div>）是组件执行后才会生成的，不会直接出现在父组件拿到的children对象里。

调用children.type()是克隆子元素树的唯一方式吗？ #

绝对不是，而且不建议直接调用children.type()——这种方式相当于手动执行组件函数，脱离了React的渲染调度机制，会导致组件无法正确参与生命周期、状态管理等流程，极易引发bug。

正确的处理方式分两种场景：

场景1：需要修改<Hello/>组件本身的props #

直接用React.cloneElement即可，它可以给自定义组件元素添加/修改props：

// 在MyComponent内部
const clonedHello = React.cloneElement(children, { newProp: 'custom-value' });
// 渲染clonedHello后，Hello组件内部就能拿到props.newProp

如果需要让Hello组件内部的DOM元素接收修改，要在Hello组件里通过props传递：

const Hello: React.FC<{ className?: string }> = ({ className }) => 
  <div className={className}>hello</div>;

// 在MyComponent里
const clonedHello = React.cloneElement(children, { className: 'modified-class' });

场景2：需要修改Hello组件内部的子元素（不推荐） #

如果必须绕过Hello组件直接修改其内部DOM，更合理的方式是让Hello组件支持渲染props：

const Hello: React.FC<{ renderContent: () => React.ReactNode }> = ({ renderContent }) => 
  renderContent();

// 使用时
<MyComponent>
  <Hello renderContent={() => <div>hello</div>} />
</MyComponent>

// 在MyComponent里修改内部元素
const originalContent = children.props.renderContent();
const modifiedContent = React.cloneElement(originalContent, { className: 'new-style' });
const clonedHello = React.cloneElement(children, { renderContent: () => modifiedContent });

本质上，React的设计鼓励组件间通过props传递数据和逻辑，而非直接操作子组件的内部DOM结构，这样能保证组件的封装性和可维护性。

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