React | React.cloneElement 的使用

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

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

下面是一个简单例子:

css 复制代码
.node1 {
  background-color: orange;
  width: fit-content;
}

.node2 {
  background-color: red;
  width: fit-content;
}
typescript 复制代码
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 覆盖了 node1className 属性,还添加了一个 onClick 方法。

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

cloneElement 官方文档

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

相关推荐
人肉推土机12 小时前
Planning Agent:基于大模型的动态规划与ReAct机制,实现复杂问题自适应执行求解
大模型·动态规划·react·planning agent
MiyueFE19 小时前
🚀🚀五个前端开发者都应该了解的TS技巧
前端·typescript
ttod_qzstudio21 小时前
基于typescript严格模式以实现undo和redo功能为目标的命令模式代码参考
typescript·命令模式
张志鹏PHP全栈21 小时前
TypeScript 第十天,TypeScript面向对象之Class(二)
前端·typescript
慧一居士1 天前
ESLint 完整功能介绍和完整使用示例演示
前端·javascript·typescript
伍哥的传说1 天前
Webpack5 新特性与详细配置指南
webpack·前端框架·vue·vue3·react·webpack5·前端构建
enzeberg2 天前
TypeScript 工具类型(Utility Types)
typescript
難釋懷2 天前
TypeScript类
前端·typescript
杰哥焯逊2 天前
基于TS封装的高德地图JS APi2.0实用工具(包含插件类型,基础类型)...持续更新
前端·javascript·typescript
工业甲酰苯胺3 天前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式