React.cloneElement的用法详解

React.cloneElement的用法详解

React.cloneElement 是 React 提供的一个 API，用于克隆现有的 React 元素，并在克隆的基础上添加或覆盖属性，同时保留原有的子元素。

语法

React.cloneElement(
  element: ReactElement, 
  props?: Partial<Props>, 
  ...children?: ReactNode[]
): ReactElement

• element: 要克隆的 React 元素。
• props: 要添加或覆盖的属性。
• children: 可选的新子元素。如果不传递，则保留原有的子元素。

返回值

• 返回一个新的 ReactElement，它是基于传入的 element 克隆的。

用法场景

1. 动态添加或覆盖属性：
   • 在不修改原始组件的情况下，为其动态添加或覆盖属性。
2. 保留或替换子元素：
   • 可以保留原有的子元素，也可以替换为新的子元素。
3. 高阶组件（HOC）：
   • 在高阶组件中，动态修改子组件的属性。

示例

1. 添加或覆盖属性

const OriginalElement = <div className="original">Hello</div>;

const ClonedElement = React.cloneElement(OriginalElement, {
  className: 'cloned', // 覆盖 className
  style: { color: 'red' } // 添加 style 属性
});

console.log(ClonedElement);
// 输出：<div class="cloned" style="color: red;">Hello</div>

2. 替换子元素

const OriginalElement = <div className="original">Hello</div>;

const ClonedElement = React.cloneElement(OriginalElement, {}, 'New Content');

console.log(ClonedElement);
// 输出：<div class="original">New Content</div>

3. 动态传递属性

const Icon = ({ className, style }: { className?: string; style?: React.CSSProperties }) => (
  <svg className={className} style={style}></svg>
);

const OriginalIcon = <Icon className="icon" />;

const ClonedIcon = React.cloneElement(OriginalIcon, {
  className: 'new-icon', // 动态覆盖 className
  style: { color: 'blue' } // 动态添加 style
});

console.log(ClonedIcon);
// 输出：<svg class="new-icon" style="color: blue;"></svg>

4. 在高阶组件中使用

const withExtraProps = (WrappedComponent) => {
  return (props) => {
    return React.cloneElement(WrappedComponent, {
      ...props,
      extraProp: 'I am extra!'
    });
  };
};

const OriginalComponent = <div>Hello</div>;

const EnhancedComponent = withExtraProps(OriginalComponent);

console.log(EnhancedComponent);
// 输出：<div extraProp="I am extra!">Hello</div>

5. 保留原有子元素

const OriginalElement = (
  <div className="original">
    <span>Child 1</span>
    <span>Child 2</span>
  </div>
);

const ClonedElement = React.cloneElement(OriginalElement, {
  className: 'cloned'
});

console.log(ClonedElement);
// 输出：<div class="cloned"><span>Child 1</span><span>Child 2</span></div>

注意事项

1. 只能克隆 React 元素：
   • 如果传入的不是 React 元素（例如 null 或普通对象），会抛出错误。
2. 子元素的处理：
   • 如果不传递 children 参数，克隆的元素会保留原有的子元素。
   • 如果传递了 children 参数，则会替换原有的子元素。
3. 性能：
   • React.cloneElement 会创建一个新的 React 元素，但不会重新渲染 DOM，性能开销较小。

总结

• React.cloneElement 是一个强大的工具，用于动态修改现有 React 元素的属性或子元素。
• 它返回一个新的 React 元素，保留原有的结构，同时可以添加或覆盖属性。
• 常用于动态属性传递、高阶组件和子元素管理。