createElement 和 cloneElement 有什么区别
2019-01-21 16:13
399 查看
版权声明:本文为博主原创文章,若需转载,请注明出处 https://blog.csdn.net/suwu150/article/details/86575557
createElement 和 cloneElement 有什么区别
createElement 和 cloneElement都能够生成可以直接在jsx页面组件中使用的标签语言,但是在生成的过程中是存在细微差别的
一、createElement
1.语法格式
React.createElement( type, [props], [...children] )
2.说明
React.createElement():JSX 语法就是用 React.createElement()来构建 React 元素的。它接受三个参数,第一个参数type可以是一个标签名。如 div、span,或者 React 组件。第二个参数props为传入的属性。第三个以及之后的参数children,皆作为组件的子组件。
如下我们使用createElement进行创建标签
我们能够通过浏览器检查看到我们设置在标签上的属性
二、cloneElement()
1.语法
React.cloneElement( element, [props], [...children] )
2.说明
React.cloneElement()与 React.createElement()相似,不同的是它传入的第一个参数element是一个 React 元素,而不是标签名或组件。新添加的属性会并入原有的属性,传入到返回的新元素中,而旧的子元素将被替换。将保留原始元素的键和引用。
如下,使用cloneElement进行创建jsx元素,在这里我们将createElement创建的element对应的 React 元素做为基点,然后进行克隆,在克隆的过程中,进行添加
id='2'属性,同时将子标签进行修改
我们能够看到将我们设置的属性添加到了标签上面,并且替换掉了子标签的内容
三、实际使用
有了以上知识的认识,我们可以在以后的组件封装中进行更加React化的设计,通过封装公共组件供其他页面迭代使用,下面我就简单进行了封装
相关文章推荐
- document.getelementbyid().value与document.getElementById().innerHTML什么区别
- addChild、addElement区别是什么
- document.getElementBy("id")与$("#id")有什么区别
- document.getElementById()和document.getElementsByName()有什么区别
- JAVA中vector的remove和removeelementat这两个方法有什么区别?
- document.getElementById("")和document.getElementsByName()和document.getElementsByTagName()有什么区别
- document.getElementBy("id")与$("#id")有什么区别
- 声明和定义有什么区别?
- 具有邮件功能的用户和联系人有什么区别?-Exchange2003系列之八
- TCP和UDP有什么区别?
- Statement和PreparedStatement的区别; 什么是SQL注入,怎么防止SQL注入? (转)
- 回调函数 钩子函数 有什么区别
- WEB服务器和应用服务器有什么区别
- 服务器的操作系统和我们用的操作系统有什么区别? (转)
- java 如何使用SpringMVC 和struts2有什么区别
- 日志采集系统flume和kafka有什么区别及联系,它们分别在什么时候使用,什么时候又可以结合?
- 不可重复读和幻读有什么区别
- hWnd,hDC,CDC有什么区别
- nginx负载均衡和反向代理有什么区别
- jsp中的两种跳转方式分别是?有什么区别?