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 相关文章推荐
JS正则表达式大全(整理详细且实用)
Nov 14 Javascript
window.print打印指定div实例代码
Dec 13 Javascript
简述JavaScript的正则表达式中test()方法的使用
Jun 16 Javascript
详解JavaScript节流函数中的Throttle
Jul 16 Javascript
浅谈JavaScript中变量和函数声明的提升
Aug 09 Javascript
javascript基本数据类型及类型检测常用方法小结
Dec 14 Javascript
基于easyui checkbox 的一些操作处理方法
Jul 10 Javascript
Vue axios设置访问基础路径方法
Sep 19 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
Feb 20 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
Aug 23 Javascript
Emberjs 通过 axios 下载文件的方法
Sep 03 Javascript
JS实现简易日历效果
Jan 25 Javascript
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
PHP安全防范技巧分享
2011/11/03 PHP
PHP启动windows应用程序、执行bat批处理、执行cmd命令的方法(exec、system函数详解)
2014/10/20 PHP
两个php日期控制类实例
2014/12/09 PHP
php多文件打包下载的实例代码
2017/07/12 PHP
详解PHP变量传值赋值和引用赋值变量销毁
2019/03/23 PHP
javascript打开新窗口同时关闭旧窗口
2009/01/16 Javascript
jQuery UI AutoComplete 自动完成使用小记
2010/08/21 Javascript
javascript 内存回收机制理解
2011/01/17 Javascript
JavaScript操作DOM元素的childNodes和children区别
2015/04/01 Javascript
JS实用的动画弹出层效果实例
2015/05/05 Javascript
javascript获取重复次数最多的字符
2015/07/08 Javascript
详解vuex 中的 state 在组件中如何监听
2017/05/23 Javascript
React Native之ListView实现九宫格效果的示例
2017/08/02 Javascript
Vue进度条progressbar组件功能
2018/04/17 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
2018/10/25 Javascript
Vue3.x源码调试的实现方法
2019/10/13 Javascript
Python中elasticsearch插入和更新数据的实现方法
2018/04/01 Python
python 每天如何定时启动爬虫任务(实现方法分享)
2018/05/21 Python
python Web开发你要理解的WSGI &amp; uwsgi详解
2018/08/01 Python
Python Opencv实现图像轮廓识别功能
2020/03/23 Python
浅析python 中大括号中括号小括号的区分
2019/07/29 Python
Python运行DLL文件的方法
2020/01/17 Python
Python 通过正则表达式快速获取电影的下载地址
2020/08/17 Python
Canvas图片分割效果的实现
2019/07/29 HTML / CSS
湖南卫视在线视频媒体平台:芒果TV
2019/10/30 全球购物
电子商务专业学生的自我鉴定
2013/11/28 职场文书
2013的个人自我评价
2013/12/26 职场文书
个人自我评价和职业目标
2014/01/24 职场文书
工作会议主持词
2014/03/17 职场文书
ktv好的活动方案
2014/08/17 职场文书
店铺转让协议书(2014版)
2014/09/23 职场文书
2015年银行柜员工作总结报告
2015/04/01 职场文书
退休欢送会主持词
2015/07/01 职场文书
2019终止劳动合同协议书最新范本!
2019/07/09 职场文书
解决Golang中ResponseWriter的一个坑
2021/04/27 Golang
MySQL中的引号和反引号的区别与用法详解
2021/10/24 MySQL