React 克隆组件 -- React.cloneElement(可以用来修改子组件属性值,复制子组件,添加子组件)...

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

大体的方案是:

在原有的按钮标签外再套一层按钮权限控制标签,然后每个具体的按钮对照后台给定的唯一值传入到这个"按钮权限控制"组件,然后在组件中判断该按钮该不该渲染,之中用到的一个技术点就是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

转载于:https://www.cnblogs.com/itgezhu/p/11576652.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值