React 克隆组件 -- React.cloneElement（可以用来修改子组件属性值，复制子组件，添加子组件）

Posted 2022-11-27

项目要求实现按钮级权限,简单来说就是需要通过后台数据绑定来控制前端页面哪些操作按钮需要渲染,哪些操作按钮不需要渲染,

大体的方案是:

在原有的按钮标签外再套一层按钮权限控制标签,然后每个具体的按钮对照后台给定的唯一值传入到这个"按钮权限控制"组件,然后在组件中判断该按钮该不该渲染,之中用到的一个技术点就是React.cloneElement,可以修改子元素的属性值，下面一起了解一下React.cloneElement

 

React.cloneElement

参数：TYPE（ReactElement），[PROPS（object）] ，[CHILDREN（ReactElement）]

克隆并返回一个新的 ReactElement （内部子元素也会跟着克隆），新返回的元素会保留有旧元素的 props、ref、key，也会集成新的 props（只要在第二个参数中有定义），第三个参数为添加的新的子元素。

 

要注意的是，createElement 的第一个参数必须是字符串或 ReactClass，而在 cloneElement 里第一个参数应该是 ReactElement：

 

原文地址：https://zhirongyuan.github.io/blog/2017/03/10/Blog-entry-two.html