cloneElement

克隆并修改 React 元素 - 增强 child 的 props

核心概述

cloneElement 用于克隆一个 React 元素并返回新的 React 元素, 可以在克隆过程中添加、修改或合并 props。它是操作 children 的强大工具。

⚠️ 已弃用:React 团队不推荐使用 cloneElement, 建议使用 render props、compound components 或其他替代方案。

技术规格

TypeScript
React.cloneElement(
  element,
  config?,
  ...children
): ReactElement
TypeScript
// 增强子组件的 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>
  );
}

延伸阅读