cloneElement
克隆并修改 React 元素 - 增强 child 的 props
核心概述
cloneElement 用于克隆一个 React 元素并返回新的 React 元素, 可以在克隆过程中添加、修改或合并 props。它是操作 children 的强大工具。
⚠️ 已弃用:React 团队不推荐使用 cloneElement, 建议使用 render props、compound components 或其他替代方案。
技术规格
TypeScript
React.cloneElement(
element,
config?,
...children
): ReactElementTypeScript
// 增强子组件的 props
function EnhancedGroup({ children }) {
return (
<div>
{React.Children.map(children, (child) => {
if (React.isValidElement(child)) {
return React.cloneElement(child, {
className: 'enhanced',
onClick: () => console.log('Clicked!'),
});
}
return child;
})}
</div>
);
}