React组件对子组件children进行加强的方法
问题
如何对组件的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> );
如下:
所以直接修改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对象即可。
好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对我们的支持。
相关推荐
-
react.js 父子组件数据绑定实时通讯的示例代码
react.js我自己还在摸索学习中,碰到父子组件数据绑定实时通讯的问题,研究了一下,分享给大家,也给自己留个笔记: import React,{Component} from 'react' import ReactDOM from 'react-dom' class ChildCounter extends Component{ render(){ return( <div style={{border:'1px solid red'}}> {this.props.count} </
-
React父子组件间的传值的方法
父组件向子组件传值: 父组件: import React, { Component } from 'react'; import Child from './chlid'; class parent extends Component{ constructor(props) { super(props); this.state = { txt0:"默认值0", txt1:"默认值1" } } componentDidMount(){ } parToson(){ th
-
react 中父组件与子组件双向绑定问题
在项目中我们可能会遇到类似这样的场景,也就是父子组件的双向数据绑定 首先,先把在head中引入react.js.react-dom.js和可选择的babel.js(这里需要注意引用的顺序,react.js必须在react-dom.js之前) <head> <script src="react.js"></script> <script src="react-dom.js"></script> <scr
-
react 父组件与子组件之间的值传递的方法
概念上,组件是封闭的环境.React中是单向数据流的设计,也就是是说只有父组件传递资料给子组件这回事.以正确的技术说明,拥有者组件可以设置被拥有者组件中的数据. 那么子组件要如何与父组件沟通这件事,简单的来说,是一种迂回的作法,在父组件中设置了一个方法(函数),然后传递给子组件的props,子组件在事件触发时,直接呼叫这个props所设置的方法(函数).但这中间,有谁(对象)呼叫了函数的设置,也就是this的作用. 父组件到子组件用props设置,子组件到父组件用上面说的方式,这是基本的套路,但
-
react 父子组件之间通讯props
实现父子组件双向数据流整体的思路是: 1,父组件可以向子组件传递props,props中带有初始化子组件的数据,还有回调函数 2,子组件的state发生变化时,在子组件的事件处理函数中,手动触发父函数传递进来的回调函数,同时时将子组件的数据传递回去(有时间研究) 父组件 父组件中定义一个函数,包含一个props的参数,函数内利用super(props)传递给子组件,this.state中用于定义本页面中要用到的以及要传递给子组件的变量. 父组件的render函数中利用<Table list={t
-
详解React之父子组件传递和其它一些要点
react是R系技术栈中最基础同时也是最核心的一环,2年不到获取了62.5k star(截止到目前),足可见其给力程度.下面对一些react日常开发中的注意事项进行罗列. React的组件生命周期 react主要思想是构建可复用组件来构建用户界面.在react里面一切皆组件.每个组件里面都是有自己的生命周期,这个生命周期规定了组件的状态和方法,分别在哪个阶段执行.下面附上一张React的生命周期图: 组件第一阶段:初始化.渲染以及装载完成: 组件第二阶段:组件运行时候的状态 ①:状态变化引发组件
-
React 子组件向父组件传值的方法
本文介绍了React 子组件向父组件传值的方法,分享给大家 子组件需要控制自己的 state, 然后告诉父组件自己的state,通过props调用父组件中用来控制state的函数,在父组件中展示子组件的state变化. /***实现在输入框输入邮箱时,在div中即时显示输入内容***/ <body> <div id="test"></div> </body> //子组件 var Child = React.createClass({ re
-
React通过父组件传递类名给子组件的实现方法
React 教程 React 是一个用于构建用户界面的 JAVASCRIPT 库. React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图). React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源. React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它. React 特点 1.声明式设计 −React采用声明范式,可以轻松描述应用. 2.高效 −React通过对DOM的模拟,最大限度
-
React优化子组件render的使用
在react中,父组件的重新render会引发子组件的重新render,但是一些情况下我们会觉得这样做有些多余,比如: 父组件并未传递props给子组件 新传递的props渲染结果不变 class A extends React.Component { render() { console.log('render') return <div>这是A组件</div> } } class Main extends React.Component { render() { return
-
React组件对子组件children进行加强的方法
问题 如何对组件的children进行加强,如:添加属性.绑定事件,而不是使用<div>{this.props.children}</div>在<div>上进行处理. 前车之鉴 今天写组件遇到这个问题,在网上查阅了很多资料,都说可以使用React.cloneElement进行处理,但是结果并不是预期想要的. 先看看这个东西有什么用: React.cloneElement(element, [props], [...childrn]) 根据React官网的说法,以上代码等
-
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
在React中写一个Animation组件为组件进入和离开加上动画/过度效果 问题 在单页面应用中,我们经常需要给路由的切换或者元素的挂载和卸载加上过渡效果,为这么一个小功能引入第三方框架,实在有点小纠结.不如自己封装. 思路 原理 以进入时 opacity: 0 --> opacity: 1 ,退出时 opacity: 0 --> opacity: 1 为例 元素挂载时 1.挂载元素dom 2.设置动画 opacity: 0 --> opacity: 1 元素卸载时 1.设置动画 o
-
React 无状态组件(Stateless Component) 与高阶组件
无状态组件(Stateless Component) 是 React 0.14 之后推出的,大大增强了编写 React 组件的方便性,也提升了整体的渲染性能. 无状态组件 (Stateless Component) function HelloComponent(props, /* context */) { return <div>Hello {props.name}</div> } ReactDOM.render(<HelloComponent name="Se
-
React 非父子组件传参的实例代码
React 是一个用于构建用户界面的 JAVASCRIPT 库. React 主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图). React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源. React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它. React 特点 1.声明式设计 −React采用声明范式,可以轻松描述应用. 2.高效 −React通过对DOM的模拟,最大限度地减少与DOM的
-
React 错误边界组件的处理
这是React16的内容,并不是最新的技术,但是用很少被讨论,直到通过文档发现其实也是很有用的一部分内容,还是总结一下- React中的未捕获的 JS 错误会导致整个应用的崩溃,和整个组件树的卸载.从 React16 开始就是这样.但是同时React也引入了一个新的概念--错误边界. 定义,是什么 错误边界仍然是一种组件,可以捕获(打印或者其他方式)处理该组件的子组件树任何位置的 JavaScript 错误,并根据需要渲染出备用UI. 工作方式类似于try-catch,但是错误边界只用于 Rea
-
react实现Radio组件的示例代码
本文旨在用最清楚的结构去实现一些组件的基本功能.希望和大家一起学习,共同进步 效果展示: 测试组件: class Test extends Component { constructor(props) { super(props) this.state = { active:1 } } onGroupChange(value) { this.setState({ active: value }) } render() { return ( <div> <RadioGroup onChan
-
基于react hooks,zarm组件库配置开发h5表单页面的实例代码
最近使用React Hooks结合zarm组件库,基于js对象配置方式开发了大量的h5表单页面.大家都知道h5表单功能无非就是表单数据的收集,验证,提交,回显编辑,通常排列方式也是自上向下一行一列的方式显示 , 所以一开始就考虑封装一个配置化的页面生成方案,目前已经有多个项目基于此方式配置开发上线,思路和实现分享一下. 使用场景 任意包含表单的h5页面(使用zarm库,或自行适配自己的库) 目标 代码实现简单和简洁 基于配置 新手上手快,无学习成本 老手易扩展和维护 写之前参考了市面上的一些方案
-
React 高阶组件HOC用法归纳
一句话介绍HOC 何为高阶组件(HOC),根据官方文档的解释:"高阶组件是react中复用组件逻辑的一项高级技术.它不属于react API的组成部分,它是从react自身组合性质中抽离出来的一种模式.具体来说,高阶组件是函数,它接受一个组件作为参数,然后返回一个新的组件 使用场景 将几个功能相似的组件里面的方法和react特性(如生命周期里面的副作用)提取到HOC中,然后向HOC传入需要封装的组件.最后将公用的方法传给组件. 优势 使代码简洁优雅.代码量更少 HOC(高阶组件) /* HOC(
-
你知道怎么基于 React 封装一个组件吗
目录 antd 是如何封装组件的 仓库地址 divider 组件源代码 如何暴露组件属性 如何设置统一类名前缀 如何处理样式与类名 divider 组件样式源代码 总结 前言 很多小伙伴在第一次尝试封装组件时会和我一样碰到许多问题,比如人家的组件会有 color 属性,我们在使用组件时传入组件文档中说明的属性值如 primary ,那么这个组件的字体颜色会变为 primary 对应的颜色,这是如何做到的?还有别人封装的组件类名都有自己独特的前缀,这是如何处理的呢,难道是 css 类名全部加上前缀
-
React创建对话框组件的方法实例
原生的前端体系创建一个对话框可是再简单不过了.但是如果放到组件化思想下的react体系中,想要制作一个属于自己的对话框还是有一定的麻烦的.主要遇到的问题有两个:一是如何在子组件中创建body下的对话框组件,二是如何删除这个组件. 接下来我们就一步一步解决这两个问题. 我们先写好dialog组件:(所有的样式都不写了,这里实现一个原型) class Dialog extends Component{ constructor(props){ super(props); } render(){ ret
随机推荐
- MySQL无GROUP BY直接HAVING返回空的问题分析
- Angular 根据 service 的状态更新 directive
- iOS实现UITableView左滑删除复制即用功能
- IE,firefox(火狐)浏览器无提示关闭窗口js实现代码小结
- 完美实现js选项卡切换效果(二)
- ASP.NET设计网络硬盘之两重要类代码
- php模板函数 正则实现代码
- php下常用表单验证的正则表达式
- PHP调用三种数据库的方法(3)
- C#编写Windows服务实例代码
- Python的几个高级语法概念浅析(lambda表达式闭包装饰器)
- Struts2中Action三种接收参数形式与简单的表单验证功能
- 一位小学生的《夜宴》观后感
- JavaScript 学习 - 提高篇
- 微信小程序 Image API实例详解
- MySQL存储文本和图片的方法
- 如何实现socket网络编程的多线程
- django写用户登录判定并跳转制定页面的实例
- Angular6使用forRoot() 注册单一实例服务问题
- JavaScript对象拷贝与Object.assign用法实例分析