react之组件通信详解
更新时间:2021年10月15日 00:01 点击:2595
父组件与子组件通信
- 父组件将自己的状态传递给子组件,子组件当做属性来接收,当父组件更改自己状态的时候,子组件接收到的属性就会发生改变
- 父组件利用ref对子组件做标记,通过调用子组件的方法以更改子组件的状态,也可以调用子组件的方法
父组中定义ref引用
import React,{Component,createRef} from 'react' import Child1 from './Child1' export default class App extends Component { constructor(props){ super(props) this.child=createRef() } render(){ return( <div> <Child1 ref={this.child}/> <button onClick={this.fn.bind(this)}></button> </div> ) } fn(){ const child=this.child.current child.setTitle() } }
子组件定义好数据源和修改数据源方法
import React,{Component} from 'react' export default class Child1 extends Component{ state={ title:'标题' } render(){ return ( <div> {this.state.title} </div> ) } setTitle(){ this.setstate({title:'hh'}) } }
子组件与父组件通信
父组件将自己的某个方法传递给子组件,在方法里可以做任意操作,比如可以更改状态,子组件通过this.props
接收到父组件的方法后调用。
跨组件通信
在react没有类似vue中的事件总线来解决这个问题,一是我们借助它们共同的父级组件通过代理的方式来实现,但过程会相当繁锁。react提供了Context来实现跨组件通信, 而不必显式地通过组件树的逐层传递 props。
复杂的非父子组件通信在react中很难处理,多组件间的数据共享也不好处理,在实际的工作中我们会使用flux、redux、mobx来实现
祖先子孙
- 定义store类 导出createContext中的Provider,COnsumer
- 在祖先节点中发布消息: Provider value=任意数据
- 在子孙节点中订阅:Consumer 回调函数{value=>(组件)}
1.定义数据源store
store.js
import React , {createContext} from 'react' let {Provider,Consumer} = createContext() export { Provider,//发布 Consumer//订阅 }
2.祖先节点
import React ,{Component} from 'react' import {Provider,Consumer} from './store' import Son from './Son' export default class App extends Component{ constructor(props){ super(props) this.state={ name:'mingcen' } } render(){ return ( <div> <Provider value={this.state.name}> <Son/> </Provider> </div> ) } }
3.后代节点
import React,{Component} from'react' import {Consumer} from './store' export default class Son1 extends Component{ constructor(props){ super(props) this.state={ name:'uuu' } } render(){ return( <div> <Consumer> { value=>{ <div>{value.name}</div> } } </Consumer> </div> ) } }
兄弟节点通信
- 一个子物体挂在事件
- 另一个挂在属性
- 通过实践改变属性,来改变另一个组件接受的内容
祖先
state={ count:1, setCount:()=>{ this.setState(state=>{ return{ count:++state.count } }) } } render(){ let {count,setCount} = this.state return( <div> <Provider value={{count,setCount}}> <Cmp1></Cmp1> <Cmp2></Cmp2> </Provider> </div> ) }
兄弟Cmp2
import React, { Component ,createContext} from 'react' export default class Cmp2 extends Component { // 只得到了默认数据 --> 没有包裹在Provider组件中 static contextType = createContext render() { return ( <div> <button onClick={this.setCount.bind(this)}>自增数据</button> </div> ) } setCount() { this.context.setCount() } }
兄弟Cmp1
<Consumer> { value => <h3>{value.count}</h3> } </Consumer>
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注猪先飞的更多内容!
上一篇: JS实现网页导航条特效
下一篇: JavaScript 反射学习技巧
相关文章
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
关于React Native报Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>错误(解决方案)
这篇文章主要介绍了关于React Native报Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>错误,本文给大家分享解决方案,需要的朋友可以参考下...2021-05-12- 今天我们来给大家介绍下在Vue开发中我们经常会碰到的一种需求场景,本文主要介绍了Vue动态查询规则生成组件,需要的朋友们下面随着小编来一起学习学习吧...2021-05-27
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- 这篇文章主要介绍了React使用高德地图的实现示例(react-amap),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
- 这篇文章主要介绍了vue中如何使用element的日历组件,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-09-30
- 这篇文章主要介绍了Vue 过渡(动画)transition组件案例详解,非常不错,具有参考借鉴价值,需要的朋友参考下...2017-01-26
React引入antd-mobile+postcss搭建移动端
本文给大家分享React引入antd-mobile+postcss搭建移动端的详细流程,文末给大家分享我的一些经验记录使用antd-mobile时发现我之前配置的postcss失效了,防止大家踩坑,特此把解决方案分享到脚本之家平台,需要的朋友参考下吧...2021-06-21- 这篇文章主要为大家详细介绍了PC蓝牙通信C#代码实现,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
使用 React 和 Threejs 创建一个VR全景项目的过程详解
这篇文章主要介绍了使用 React 和 Threejs 创建一个VR全景项目的过程详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-06- 这篇文章主要介绍了Vue多选列表组件深入详解,这个是vue的基本组件,有需要的同学可以研究下...2021-03-03
- 在.NET平台下创建C#串口通信程序,.NET 2.0提供了串口通信的功能,其命名空间是System.IO.Ports,创建C#串口通信程序的具体实现是如何的呢?让我们开始吧...2020-06-25
- 这篇文章主要为大家详细介绍了vue递归实现自定义tree组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-08-20
- 在网页中,经常见到进度条效果,那么这些个性的进度条组件效果是怎么实现的呢,下面脚本之家小编给大家分享Bootstrap进度条组件知识详解,感兴趣的朋友要求学习吧...2016-05-04
- 这篇文章主要介绍了Vue 组件复用多次自定义参数操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27
- 思路其实没有那么复杂,把地图想成一个盒子容器,地图中心点想成盒子中心点;扎点在【地图中心点】不会动,当移动地图时,去获取【地图中心点】经纬度,设置某个位置的时候,将经纬度设置为【地图中心点】即可...2021-06-20
- 这篇文章主要介绍了Vue父子组件传值的一些坑,帮助大家更好的理解和使用vue父子组件,感兴趣的朋友可以了解下...2020-09-16
- 这篇文章主要为大家详细介绍了React列表栏及购物车组件使用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-06-28
- 这篇文章主要介绍了react使用antd表单赋值,用于修改弹框的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-29
- Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架,主要基于 HTML、CSS、JAVASCRIPT 的。接下来通过本文给大家介绍BootStrap 附加导航组件的知识,感兴趣的朋友一起学习吧...2016-07-29