从Popconfirm的实现学习React cloneElement用法

前端技术发表留言

一直在使用antd（Ant Design），因为其丰富的组件库给管理后台开发带来了很多的便利性，让我们只需要关注业务。里面也有很多实现方案值得借鉴，本文就以Popconfirm的实现做个介绍。

我们先看是如何使用的，下面是官方给出的例子：

import { Popconfirm, message } from 'antd';

function confirm(e) {
  console.log(e);
  message.success('Click on Yes');
}

function cancel(e) {
  console.log(e);
  message.error('Click on No');
}

ReactDOM.render(
  <Popconfirm
    title="Are you sure to delete this task?"
    onConfirm={confirm}
    onCancel={cancel}
    okText="Yes"
    cancelText="No"
  >
    <a href="#">Delete</a>
  </Popconfirm>,
  mountNode,
);

页面展示效果如下

image.png

我们查看上面代码实例，只是在a标签的外部包裹了一层Popconfirm组件，然而我们并没有定义a的点击事件，所有的配置直接放在了Popconfirm上，就能实现上述的功能。

在极其简单的使用方式上也能看出对代码的侵入型很小，如果那天我们不需要Popconfirm，直接将Popconfirm组件删除，并将onConfirm上的操作移到a的onClick上即可。

但是使用的时候就有一些疑问，a上面没有绑定任何的事件，但是点击的时候为什么会触发确认框呢？

所以就好奇翻了下源码，发现它的实现借助了React.cloneElement去实现的，该方法可以将元素拷贝并且修改其属性。

源码位置1：components/popconfirm

源码位置2：components/_util/reactNode.ts (基于React.cloneElement封装的工具函数)

我又看了先React的官方文档说明，React.cloneElement，其描述也简单明了

image.png

其实明白了这些，我们就能实现一些可插拔的组件了，例如antd中的下面组件

如果你深入使用antd的话，你会发现Form表单中Form.Item下面的input没有绑定value和onChange，但是为什么表单可以获得数据呢，其实也是通过React.cloneElement实现的。

‍

留下回复