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 官方文档

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

相关推荐
ttod_qzstudio9 小时前
解决 Vue 3 + TypeScript 中 v-for 循环类型推断问题
前端·vue.js·typescript
今天头发还在吗20 小时前
【React】动态SVG连接线实现:图片与按钮的可视化映射
前端·javascript·react.js·typescript·前端框架
冷冷的菜哥1 天前
react多文件分片上传——支持拖拽与进度展示
前端·react.js·typescript·多文件上传·分片上传
Kisang.1 天前
【HarmonyOS】窗口管理实战指南
前端·华为·typescript·harmonyos·鸿蒙
Dajiaonew2 天前
Vue3 + TypeScript 一篇文章 后端变全栈
前端·javascript·typescript
敲敲敲敲暴你脑袋2 天前
用3Dmol.js展示3D分子结构
typescript·webgl·数据可视化
还是大剑师兰特2 天前
TypeScript 面试题及详细答案 100题 (11-20)-- 基础类型与类型操作
typescript·大剑师·typescript教程·typescript面试题
用户47949283569152 天前
TypeScript 和 JavaScript 的 'use strict' 有啥不同
前端·javascript·typescript
用户47949283569152 天前
还不知道'use strict'的作用?这篇文章给你讲清楚
前端·javascript·typescript
千码君20163 天前
React Native:发现默认参数children【特殊的prop】
javascript·react native·ecmascript·react·组件树