cloneelement react 实现
cloneElement 的基本用法
React.cloneElement 用于克隆并返回一个新的 React 元素，同时可以添加新的 props 和 children。基本语法如下：
React.cloneElement(element, [props], [...children])该方法会保留原始元素的 key 和 ref，不会因为克隆而丢失这些重要属性。第一个参数是要克隆的元素，第二个参数是要合并的新 props，第三个参数是要替换的子元素。
典型应用场景
克隆元素常用于需要修改子组件 props 的高阶组件或布局组件中。比如需要给所有子元素添加某个通用属性时：
const EnhancedChildren = React.Children.map(children, child => {
return React.cloneElement(child, {
extraProp: 'value'
});
});这种模式在表单组件中很常见，父组件可能需要给所有子输入组件注入 value 和 onChange 等 props。
与 Children.map 结合使用
通常 cloneElement 会与 React.Children.map 一起使用来遍历和修改子元素：
function InjectProps({ children, ...props }) {
return React.Children.map(children, child => {
return React.cloneElement(child, props);
});
}这种组合可以确保即使只有一个子元素也能正确处理，因为 Children.map 已经处理了 children 可能是数组或单个元素的情况。
保留原始 props
克隆时新 props 会与原始 props 浅合并。如果需要保留原始事件处理函数等 props，需要手动合并：
React.cloneElement(child, {
...child.props,
onClick: (...args) => {
child.props.onClick?.(...args);
customHandler(...args);
}
});性能注意事项
频繁使用 cloneElement 可能会影响性能，因为它会创建新的元素对象。在不需要修改子元素时，直接渲染 children 是更好的选择。
TypeScript 类型处理
在使用 TypeScript 时，克隆后的元素类型会保持原始类型。如果需要类型断言可以这样做：
React.cloneElement(child as React.ReactElement<PropsType>, newProps);这种模式在组件库开发中很常见，可以保持类型安全的同时灵活修改子组件。
