美文网首页前端开发WEB前端程序开发程序员
React 克隆组件 ----- React.cloneElem

React 克隆组件 ----- React.cloneElem

作者: 尔后不再希冀 | 来源:发表于2017-03-12 21:12 被阅读0次

上一周公司项目要求实现按钮级权限,简单来说就是需要通过后台数据绑定来控制前端页面哪些操作按钮需要渲染,哪些操作按钮不 需要渲染,这可为难了我好些天啊,那么多页面,想想头疼,好在现在方案已经想出来了,大体的方案是:在原有的按钮标签外再套一层 按钮权限控制 标签,然后没个具体的按钮对照后台给定的唯一值传入到这个"按钮权限控制"组件,然后在组件中 判断改按钮该不该渲染,之中用到的一个技术 点就是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

相关文章

  • React 克隆组件 ----- React.cloneElem

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

  • React基础

    React包含react元素和react组件 react元素 react组件 react组件分为函数组件和类组件 ...

  • 组件

    组件是React的基石,所有的React应用程序都是基于组件的。React组件,可以通过React.createC...

  • ReactNative学习笔记(三)Hello World!

    React Native 看起来很像 React,但React Native的基础组件是原生组件 不是web组件。...

  • react子组件向父组件传值

    相关资料:react 父组件怎么获取子组件的这个值React组件间信息传递方式react同级组件之间传值 • 父...

  • React 进阶二 组件详解

    React组件 React的组件大概分为俩部分,无状态组件和有状态组件 无状态组件。下面React官网中定义的一个...

  • 2、react基础介绍

    React理念 划分组件边界的原则 React组件的数据种类 React组件的声明周期 组件的划分 高内聚 低耦合...

  • React概念图

    React概念图 React组件生命周期概念图 参考文档:React入门教程 组件生命周期React:组件生命周期...

  • react16.3-jest

    功能组件和UI组件 react-antd 命名 react 规定组件开头都为大写,所以如果react项目如果用an...

  • 如何创建React组件并发布到npm?

    实现步骤: 创建React组件项目; 创建测试项目并引用组件; 发布React组件到npm上; 一、创建React...

网友评论

    本文标题:React 克隆组件 ----- React.cloneElem

    本文链接:https://www.haomeiwen.com/subject/tmexnttx.html