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

时间: 2024-11-09 09:34:33

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

使用SetWindowPos API函数移动窗口后,还需修改Delphi的属性值,以备下次使用,否则就会出问题(不是API不起作用,而是使用了错误的坐标值)

单独改变坐标的代码如下,可不断左移: procedure TForm1.Button1Click(Sender: TObject); begin SetWindowPos(panel1.Handle, 0, panel1.Left-10, panel1.Top, panel1.Width, panel1.Height, SWP_NOZORDER + SWP_NOACTIVATE); end; 照理每次改变坐标,都会调用SetBounds,都会调用SetWindowPos函数,可是一旦我屏蔽Upd

JQuery修改对象的属性值

JQuery修改对象的属性值 用到的便是JQuery提供的attr方法,获取属性值的基本结构为:$(obj).attr("属性名"):修改属性值的结构为:$(obj).attr("属性名", "属性值"): <script type="text/javascript"> function ChangeObjAttrValue() { var objs = $("#first_div .mySpan&quo

关于Javascript中通过实例对象修改原型对象属性值的问题

Javascript中的数据值有两大类:基本类型的数据值和引用类型的数据值. 基本类型的数据值有5种:null.undefined.number.boolean和string. 引用类型的数据值往大的说就1种,即Object类型.往细的说有:Object类型.Array类型.Date类型.Regexp类型.Function类型等. 当原型对象的属性值为基本类型的数据值时,通过实例对象修改属性值从而引起原型对象的属性值发生变化的情况不会发生.当原型对象的属性值为引用类型的数据值时,通过实例对象修改

修改类的属性值

#直接修改属性的值# -*- coding:utf-8 -*- class Car(): def __init__(self,make,model,year): self.make = make self.model = model self.year = year self.odometer_reading = 0 def get_descriptive_name(self): long_name = str(self.year) + ' ' + self.make + ' ' + self.

微信小程序中用setData修改一个对象的属性值

1. Page({    data: {      items:{ //items为一个对象,is_like和like分别为其两个属性     is_like: 0,    like: 0  } }, likes: function () { var is_like ="items.is_like"; //先用一个变量,把items.is_like用字符串拼接起来 var like = "items.like"; if (this.data.items.is_lik

动态修改css文件中,具体的class中的个别属性值。

//修改class的属性值 //javascript方式 function setCssClassProperty(pSheetObj,pClassName,pProperty,pValue) { var rules = pSheetObj.sheet.cssRules; var rule; var selectorText; for (i = 0; i < rules.length; i++) { rule = rules[i]; selectorText = rule.selectorTex

57.动态添加子View(Java/XML两种方式)

/** * 动态添加子View(Java) */ private View createViewWithJava() { LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams( ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT); LinearLayout view = new LinearLayout(this); view.set

【REACT NATIVE 系列教程之十三】利用LISTVIEW与TEXTINPUT制作聊天/对话框&&获取组件实例常用的两种方式

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/react-native/2346.html 本篇Himi来利用ListView和TextInput这两种组件实现对话.聊天框. 首先需要准备的有几点:(组件的学习就不赘述了,简单且官方有文档) 1. 学习下 ListView: 官方示例:http://reactnative.cn/docs/0.27/tutorial.html#content

React.lazy和React.Suspense异步加载组件

在React16.6中引入了React.lazy和React.Suspense,这两个组件,可以用来实现异步加载组件. 例如: const johanComponent = React.lazy(() => import(/* webpackChunkName: "johanComponent" */ './myAwesome.component')); export const johanAsyncComponent = props => ( <React.Susp