react 嵌套组件的通信
2018-09-13 14:48 muamaker 阅读(759) 评论(0) 编辑 收藏 举报在react中经常会用到的组件嵌套,如下:
图中 parent本身是一个自定义的组件,然后内部又加入了 child的自定义组件,那么这种情况,父子之间如何通信
react中在父组件里面有一个 this.props.children 当没有子组件时,值为 undefined ,只有一个子组件时,为一个对象,多个子组件时为一个数组
我们可以使用react提供的方法遍历子组件,并且绑定
代码如下:
child.jsx
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | import React, { Component } from 'react' ; class Child extends Component { constructor(props){ super (props); this .state = {date: new Date()}; } showValue=()=>{ this .props.showValue && this .props.showValue() } render() { return ( <div className= "Child" > <div className= "content" > Child <button onClick={ this .showValue}>调用父的方法</button> </div> </div> ); } } export default Child; |
在 parent.jsx中
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | import React, { Component } from 'react' ; class Parent extends Component { constructor(props){ super (props); this .state = {date: new Date()}; } showValue=()=>{ console.log( "showValue...." ) } renderChildren(props) { //遍历所有子组件 return React.Children.map( this .props.children, child => { var childProps = { //把父组件的props.name赋值给每个子组件(父组件传值给子组件) name: props.name, //父组件的方法挂载到props.showValue上,以便子组件内部通过props调用 showValue: this .showValue }; return React.cloneElement(child,childProps ); }); } render() { return ( <div className= "Parent" > <div className= "content" > Parent { this .renderChildren( this .props)} </div> </div> ); } } export default Parent; |
关键在于:遍历内部的子组件,然后动态的给子组件绑定props
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 《HelloGitHub》第 106 期
· 数据库服务器 SQL Server 版本升级公告
· 深入理解Mybatis分库分表执行原理
· 使用 Dify + LLM 构建精确任务处理应用