[react] createElement与cloneElement两者有什么区别?
[react] createElement与cloneElement两者有什么区别?
createElement
是创建一个React元素,jsx
即是这个函数的语法糖;它的函数签命是React.createElement(type, [props], [...children])
cloneElement
是拷贝一个React元素,可选择在修改它的props后,再返回一个新的React元素;它的函数签命是React.cloneElement(element, [props], [...children]): ReactElement
,这个函数常结合React.Children.map
一起使用,修改props.children
的props,来进行一些额外的操作,如下
/** 以下代码实现点击子组件是,先执行父组件的onClick方法,再执行子组件的onClick方法*/
import React from 'react';function Tab(props) {const _onClick = (onclick) => {props.onClick();onclick();};return <ul onClick={props.onClick}>{React.Children.map(props.children, child => {const childProps = child.props;const newProps = {...childProps,onClick: _onClick.bind(null, childProps.onClick)}return React.cloneElement(child, newProps);})}</ul>
}function TabItem(props) {const onClick = event => {event.stopPropagation();props.onClick(event);}return <li onClick={onClick}>{props.children}</li>
}function Demo() {const onClickTab = () => {console.log('onClickTab')}const onClickItem = () => {console.log('onClickItem')}return <Tab onClick={onClickTab}><TabItem onClick={onClickItem}>111</TabItem><TabItem onClick={onClickItem}>222</TabItem><TabItem onClick={onClickItem}>333</TabItem></Tab>
}export default Demo;
个人简介
我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,
但坚持一定很酷。欢迎大家一起讨论
主目录
[react] createElement与cloneElement两者有什么区别?相关推荐
- 前端战五渣学React——JSX React.createElement() React.ReactElement()源码
最近<一拳超人>动画更新第二季了,感觉打斗场面没有第一季那么烧钱了,但是剧情还挺好看的,就找了漫画来看.琦玉老师真的厉害!!!打谁都一拳,就喜欢看老师一拳把那些上来就吹牛逼的反派打的稀烂, ...
- [react] react与angular、vue有什么区别?
[react] react与angular.vue有什么区别? Angular以前有接触过,我的感觉是,这不像React和Vue一样是构架+补充库(比如需要另外的全家桶来配合使用),它的功能非常完整, ...
- [react] Mern和Yeoman脚手架有什么区别?
[react] Mern和Yeoman脚手架有什么区别? MERN是一种脚手架工具,可使用Mongo,Express,React和Nodejs轻松构建同构应用 Yeoman也是脚手架工具,它是基于No ...
- [react] 在React中组件和元素有什么区别?
[react] 在React中组件和元素有什么区别? 组件首字母大写 组件是由元素构成的.元素数据结构是普通对象,而组件数据结构是类或纯函数 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚 ...
- [react] 使用PropTypes和Flow有什么区别?
[react] 使用PropTypes和Flow有什么区别? Flow 是一个针对react项目所有 JavaScript 代码的静态类型检测器,需要单独添加依赖并手动运行 PropTypes是针对组 ...
- [react] super()和super(props)有什么区别?
[react] super()和super(props)有什么区别? react 中的class 是基于es6的规范实现的, 继承是使用extends关键字实现继承的,子类必须在constructor ...
- React.createElement使用
React.createElement一看这个就能和document.createElement方法类似,创建元素 document.createElement是创建一个指定的元素节点,其参数只有一个 ...
- React.createElement的理解使用
React.createElement(): 根据指定的第一个参数创建一个React元素. React.createElement(type,[props],[...children] ) 第一个参数 ...
- React.createElement()的使用
React.createElement()根据指定的第一个参数来创建一个虚拟DOM React.createElement(标签名,属性props对象, 子节点1,子节点2 -) 1. 第一个参数必填 ...
最新文章
- TVM vs TensorRT比较
- 宗宁:全面解析微博财报数据爆发下的平台机会
- js 获得radio的值
- django2.x/3.x 前端页面在debug模式中找不到动态文件static
- 1年经验却拿总监薪资?看到他做的数据可视化报表,我彻底服了
- vscode为各自项目添加launch和setting
- java宠物实训报告,基于Java的宠物用品商城的设计与实现-开题报告
- 基于 koajs 的前后端分离实践
- vue.js实现自定义输入分页
- IP静态路由实验(基于华为eNSP模拟器)
- 基于SSH开发报刊订阅管理系统的设计与实现
- 各种光纤接口类型介绍
- UI自动化常见的等待方式
- 常见的压力面试题及面试技巧
- 计算机应用基础中级,《计算机应用基础》中级测试题-针对考题实操
- debug模式启用浏览器
- Acquisition Attempt Failed!!! Clearing pending acquires. While trying to acquire a needed new resour
- openEuler 开源汇智赢未来|2023开放原子全球开源峰会OpenAtom openEuler 论坛成功召开
- 企业数字化转型该怎么做?有效工具有哪些?
- 【STM32开发小技巧】CUBEMX改变工程模板(FreeMarker一键生成定制文件)