React | React.cloneElement 的使用

我看到同事的代码里有 cloneElement，于是去了解了一下这个函数。

就跟它的名字一样，克隆元素，可以基于一个元素创建一个新的元素，并且为新元素添加新的属性或者覆盖已有的属性。

下面是一个简单例子：

.node1 {
  background-color: orange;
  width: fit-content;
}

.node2 {
  background-color: red;
  width: fit-content;
}

import React from 'react';
import styles from './index.less';

const CloneElement = () => {
  const node1 = <div className={styles.node1}>node</div>;
  // 修改className,添加onClick
  const node2 = React.cloneElement(node1, {
    className: styles.node2,
    onClick: () => {
      console.log('点击node2');
    },
  });

  return (
    <div>
      {node1}
      {node2}
    </div>
  );
};

export default CloneElement;

效果：

node2 克隆自 node1，并且 node2 覆盖了 node1 的 className 属性，还添加了一个 onClick 方法。

不得不说还是挺好用的，但是官方认为使用 cloneElement 是不常见的做法，并且可能导致代码变得脆弱，建议我们使用传值的方式：

cloneElement 官方文档

总结就是，我们要知道这个函数的作用是什么，但使用的时候要慎重。