React组件对子组件children进行加强的方法


Posted in Javascript onJune 23, 2019

问题

如何对组件的children进行加强,如:添加属性、绑定事件,而不是使用<div>{this.props.children}</div>在<div>上进行处理。

前车之鉴

今天写组件遇到这个问题,在网上查阅了很多资料,都说可以使用React.cloneElement进行处理,但是结果并不是预期想要的。

先看看这个东西有什么用:

React.cloneElement(element, [props], [...childrn])

根据React官网的说法,以上代码等价于:

<element.type {...element.props} {...props}>{children}</element.type>

这么做其实也是给children包了一层标签,再对其进行间接处理,没有直接修改children。

如:

// App.jsx
<Father>
 <div style={{ color: 'red' }} onClick={() => console.log('hello')}>
  demo
 </div>
<Father>

我们希望在Father.jsx的内部将div转为inline-block。按照网上的做法,是这样的:

// Father.jsx
const Son = React.cloneElement(
 this.props.children,
 {
  style: {
   display: 'inline-block'
  }
 }
)

但是实际效果是这样的:

<div style={{ dispaly: 'inline-block' }}>
 <div style={{ color: 'red' }} onClick={() => console.log('hello')}>
  demo
 </div>
<div>

哈!?子元素的父元素被设为了inline-block,和我们想要的<div>demo</div>被设为inline-block。结果与预期完全不同,简直大失所望!!!

React.clone根本对不起它clone的名字!!!

自我探索

思路: jsx语法表示的元素只是react组件的一个语法糖。所以组件是对象。既然是对象我们就可以直接对其进行修改。

尝试在控制台打印一个如下react组件:

// this.props.children
console.log(
 <div
  style={{ color: 'red' }}
  onClick={() => {
   console.log('hello');
  }}
 >
  demo
 </div>
);

如下:

React组件对子组件children进行加强的方法

所以直接修改this.props.children即可:

// Father.jsx
const { children } = this.props;
const Son = {
 ...children,
 props: {
   ...children.props,
  dispaly: {
   ...children.style,
   display: 'inline-block'
  },
  onTransitionEnd: () => { console.log('hello world') }
 }
}

总结

如何对组件的children进行直接加强,直接修改this.props.children对象即可。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Code:findPosX 和 findPosY
Dec 20 Javascript
学习YUI.Ext 第三天
Mar 10 Javascript
Js 获取HTML DOM节点元素的方法小结
Apr 24 Javascript
ExtJS 工具栏 分页事件参数
Mar 05 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
Apr 10 Javascript
js获取下拉列表框中的value和text的值示例代码
Jan 11 Javascript
javascript随机显示背景图片的方法
Jun 18 Javascript
原生JS实现不断变化的标签
May 22 Javascript
AngularJs定时器$interval 和 $timeout详解
May 25 Javascript
关于vue状态过渡transition不起作用的原因解决
Apr 09 Javascript
html5 录制mp3音频支持采样率和比特率设置
Jul 15 Javascript
Vue h函数的使用详解
Feb 18 Vue.js
vue使用websocket的方法实例分析
Jun 22 #Javascript
JS实现简单的文字无缝上下滚动功能示例
Jun 22 #Javascript
js图片查看器插件用法示例
Jun 22 #Javascript
JS实现继承的几种常用方式示例
Jun 22 #Javascript
让 babel webpack vue 配置文件支持智能提示的方法
Jun 22 #Javascript
简单了解TypeScript中如何继承 Error 类
Jun 21 #Javascript
如何在JavaScript中谨慎使用代码注释
Jun 21 #Javascript
You might like
第三节 定义一个类 [3]
2006/10/09 PHP
浅析THINKPHP的addAll支持的最大数据量
2015/02/03 PHP
yii2分页之实现跳转到具体某页的实例代码
2016/06/02 PHP
使用php自动备份数据库表的实现方法
2017/07/28 PHP
Mootools 1.2教程(21)——类(二)
2009/09/15 Javascript
js压缩工具 yuicompressor 使用教程
2010/03/31 Javascript
基于jquery的跨域调用文件
2010/11/19 Javascript
js中同步与异步处理的方法和区别总结
2013/12/25 Javascript
js四舍五入数学函数round使用实例
2014/05/09 Javascript
javascript Deferred和递归次数限制实例
2014/10/21 Javascript
jQuery选择器源码解读(一):Sizzle方法
2015/03/31 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
2015/04/25 Javascript
avalonjs实现仿微博的图片拖动特效
2015/05/06 Javascript
js判断浏览器类型及设备(移动页面开发)
2015/07/30 Javascript
jQuery Validate初步体验(一)
2015/12/12 Javascript
H5用户注册表单页 注册模态框!
2016/09/17 Javascript
js字符串引用的两种方式(必看)
2016/09/18 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
2016/12/01 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
2017/03/15 Javascript
SpringMVC+bootstrap table实例详解
2017/06/02 Javascript
jQuery实现QQ空间汉字转拼音功能示例
2017/07/10 jQuery
浅谈vuex的基本用法和mapaction传值问题
2019/11/08 Javascript
基于JavaScript实现留言板功能
2020/03/16 Javascript
python执行外部程序的常用方法小结
2015/03/21 Python
使用Python中的cookielib模拟登录网站
2015/04/09 Python
scrapy-redis分布式爬虫的搭建过程(理论篇)
2020/09/29 Python
美国儿童运动鞋和服装零售商:Kids Foot Locker
2017/08/05 全球购物
Zadig&Voltaire官网:法国时装品牌
2018/01/05 全球购物
澳大利亚领先的时尚内衣零售商:Bras N Things
2020/07/28 全球购物
简历的自荐信
2013/12/19 职场文书
公司建议书怎么写
2014/05/15 职场文书
投标承诺书怎么写
2014/05/24 职场文书
销售区域经理岗位职责
2015/04/10 职场文书
入党函调证明材料
2015/06/19 职场文书
干货:如何写好观后感 !
2019/05/21 职场文书
Nebula Graph解决风控业务实践
2022/03/31 MySQL