React组件对子组件children进行加强的方法
前端  /  管理员 发布于 3年前   417
问题
如何对组件的children进行加强,如:添加属性、绑定事件,而不是使用{this.props.children}在上进行处理。
前车之鉴
今天写组件遇到这个问题,在网上查阅了很多资料,都说可以使用React.cloneElement进行处理,但是结果并不是预期想要的。
先看看这个东西有什么用:
React.cloneElement(element, [props], [...childrn])
根据React官网的说法,以上代码等价于:
{children}
这么做其实也是给children包了一层标签,再对其进行间接处理,没有直接修改children。
如:
// App.jsx console.log('hello')}> demo我们希望在Father.jsx的内部将div转为inline-block。按照网上的做法,是这样的:
// Father.jsxconst Son = React.cloneElement( this.props.children, { style: { display: 'inline-block' } })但是实际效果是这样的:
console.log('hello')}> demo哈!?子元素的父元素被设为了inline-block,和我们想要的demo被设为inline-block。结果与预期完全不同,简直大失所望!!!
React.clone根本对不起它clone的名字!!!
自我探索
思路: jsx语法表示的元素只是react组件的一个语法糖。所以组件是对象。既然是对象我们就可以直接对其进行修改。
尝试在控制台打印一个如下react组件:
// this.props.childrenconsole.log({ console.log('hello'); }} > demo );如下:
所以直接修改this.props.children即可:
// Father.jsxconst { 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 父组件与子组件之间的值传递的方法
- React 子组件向父组件传值的方法
- React通过父组件传递类名给子组件的实现方法
- React父子组件间的传值的方法
- react.js 父子组件数据绑定实时通讯的示例代码
- react 父子组件之间通讯props
- 详解React之父子组件传递和其它一些要点
- React优化子组件render的使用
- react 中父组件与子组件双向绑定问题
Top
- 相关文章
- 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
- 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
- 使用mock-server实现模拟接口对接流程步骤(0个评论)
- vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
- 在Node.js中实现消费rabbitmq队列消息示例(0个评论)
- 近期文章
- Laravel 11.5版本发布-匿名事件广播(0个评论)
- Windows 10的告别:2025年10月14日,一段时代的终结(0个评论)
- windows10系统种go + gin项目编译打包及部署至线上Ubuntu服务器中(0个评论)
- Property Hooks RFC在PHP 8.4中越来越接近现实(0个评论)
- 在Laravel 11.4测试中断言异常(0个评论)
- Laravel 11.4版本发布(0个评论)
- 在laravel框架中使用Laravel Stripe Connect包实现与Stripe Connect集成示例(0个评论)
- 在go语言种实现为加密添加数据和为解密取消添加数据示例(0个评论)
- 在go语言中实现使用机器的唯一哈希值将可执行文件锁定在特定机器上示例(0个评论)
- 在go语言中使用 go get 命令更新所有软件包(0个评论)
- 近期评论
123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..路人 在
php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细,如果加个前端chatgpt对话页面就完美了..
Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号