我看到同事的代码里有 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 =styles.node1}>node; // 修改className,添加onClick const node2 = React.cloneElement(node1, { className: styles.node2, onClick: () => { console.log('点击node2'); }, }); return ({node1} {node2}); }; export default CloneElement;
效果:
node2 克隆自 node1,并且 node2 覆盖了 node1 的 className 属性,还添加了一个 onClick 方法。
不得不说还是挺好用的,但是官方认为使用 cloneElement 是不常见的做法,并且可能导致代码变得脆弱,建议我们使用传值的方式:
cloneElement 官方文档
总结就是,我们要知道这个函数的作用是什么,但使用的时候要慎重。