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

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

相关推荐
一笑code1 天前
vue/微信小程序/h5 实现react的boundary
微信小程序·vue·react
摸鱼仙人~1 天前
如何创建基于 TypeScript 的 React 项目
javascript·react.js·typescript
一生躺平的仔2 天前
TypeScript入门(九)装饰器:TypeScript的"元编程超能力"
typescript
MiyueFE2 天前
让我害怕的 TypeScript 类型 — — 直到我学会了这 3 条规则
前端·typescript
前端拿破轮2 天前
😭😭😭看到这个快乐数10s,我就知道快乐不属于我了🤪
算法·leetcode·typescript
前端_ID林2 天前
每个开发人员都应该知道的 TypeScript 技巧
typescript
奋飛2 天前
TypeScript系列:第六篇 - 编写高质量的TS类型
javascript·typescript·ts·declare·.d.ts
BillKu12 天前
Vue3 + TypeScript + xlsx 导入excel文件追踪数据流转详细记录(从原文件到目标数据)
前端·javascript·typescript
小Lu的开源日常12 天前
Drizzle vs Prisma:现代 TypeScript ORM 的深度对比
数据库·typescript·前端框架
Shixaik12 天前
配置@为src
typescript·前端框架