反应知识中一个主要内容便是组件之间的通信,以下列举几种常用的组件通信方式,本文就详细的介绍一下,感兴趣的可以了解一下
目录
一、父子组件通信二、跨级组件通信1、逐层传值2、跨级传值三、兄弟(无嵌套)组件通信四、路由传值五、还原反应知识中一个主要内容便是组件之间的通信,以下列举几种常用的组件通信方式,结合实例,通俗易懂,建议收藏。
一、父子组件通信
原理:父组件通过props(与vue中的props区分开)向子组件通信,子组件通过回调事件与父组件通信。
首先,先创建一个父组件Parent.js跟子组件Children.js二者的关系为直接父子关系。
Parent.js父组件如下,给父组件一个默认状态状态,引入子组件,通过在子组件加上toChildren={this.state.msg},该处即为向子组件传道具。
从“做出反应”导入做出反应;
从"元素-反应"导入{ Button };
从'导入孩子./儿童';
类父扩展做出反应.组件{
施工员(道具){
超级(道具);
this.state={
'消息:'父组件传递给子组件'
};
这个。改msg=这个。换味精。装订(这个)
}
changeMsg(){
this.setState({
'消息:'父组件传递给子组件(改变之后的内容)'
})
}
render(){
返回(
div style={ {背景色:' # f7ba 2a ',填充:' 20像素',宽度:' 500像素',边距:' auto ',textAlign:'center'}}
p父子组件通信实例/p
Button onClick={this.changeMsg}父传子/按钮
儿童到儿童={这个。状态。msg }/儿童
/div
)
}
}
导出默认父项
儿童。射流研究…子组件如下,初始状态通过小道具拿到父组件传过来的值。
从“做出反应”导入做出反应;
班级儿童延伸反应。组件{
施工员(道具){
超级(道具);
this.state={
msg:this.props.toChildren //通过小道具拿到父组件传过来的值
};
}
render(){
返回(
div style={ {背景色:' # 13ce 66 ',填充:' 10px ',宽度:' 200像素',边距:' auto ',marginTop:'20px'}}
p从父组件传过来:/p
span style={ { color:' blue ' } } { this。状态。msg }/span
/div
)
}
}
导出默认子项
注意:子组件取值时应与父组件放在子组件的字段小道具一致,即本例中的toChildren,如下
那么子组件想向父组件传值(向上传值),可以通过调用父组件传过来的回调函数
在Parent.js中向儿童。射流研究…中加入回调函数回拨,绑定changeMsg方法
从“做出反应”导入做出反应;
从'导入孩子./儿童';
类父扩展做出反应.组件{
施工员(道具){
超级(道具);
this.state={
'消息:'父组件传递给子组件,
fromChildrn:" "
};
这个。改msg=这个。换味精。装订(这个)
}
changeMsg(val){
this.setState({
瓦尔
})
}
render(){
返回(
div style={ {背景色:' # f7ba 2a ',填充:' 20像素',宽度:' 500像素',边距:' auto ',textAlign:'center'}}
p父子组件通信实例/p
span style={ { color:' red ' } } { this。状态。来自儿童rn }/span
孩子对孩子={这个。状态。msg }回调={ this。更改邮件}/儿童
/div
)
}
}
导出默认父项
在子组件中,用this.props.callback()执行父组件的回调函数,从而执行绑定方法changeMsg,显示子组件传过来的值
从“做出反应”导入做出反应;
从"元素-反应"导入{ Button };
班级儿童延伸反应。组件{
施工员(道具){
超级(道具);
this.state={
msg:this.props.toChildren
};
这个。到父=这个。敬父母。装订(这个)
}
顶级父项(){
this.props.callback('子组件传过来的值') //子组件通过此触发父组件的回调方法
}
render(){
返回(
div style={ {背景色:' # 13ce 66 ',填充:' 10px ',宽度:' 200像素',边距:' auto ',marginTop:'20px'}}
p从父组件传过来:/p
span style={ { color:' blue ' } } { this。状态。msg }/span
Button onClick={this.toParent}子传父/按钮
/div
)
}
}
导出默认子项
注意:props中回调函数的名字要一致,即本例中的callback,如下
小结:以上是直接父子组件通信的方式之一,通过道具从家长传给孩子;将其传递给父进程并执行回调。
二、跨级组件通信
假设一个父组件中有一个子组件,这个子组件中又有一个子组件,暂且称为“子组件”。当父组件需要与“子组件”通信时,常见的方式有两种:逐层传递值和跨层传递值。
1、逐层传值
这种方式就是在上面直接亲子沟通的基础上,再加一个中间层。比如父子组件通信,可以先互相通信,再互相通信。传播层面就变成了亲子孙。同样可以通过道具传承,通过回调上传。不,如果你有兴趣,你自己做吧。
2、跨级传值
顾名思义,父亲与“孙子”沟通,不经过子(中间层)组件。Context在此介绍。
React官方文档解释了上下文:
在一个典型的 React 应用中,数据是通过 props 属性自上而下(由父及子)进行传递的,但这种做法对于某些类型的属性而言是极其繁琐的(例如:地区偏好,UI 主题),这些属性是应用程序中许多组件都需要的。Context 提供了一种在组件之间共享此类值的方式,而不必显式地通过组件树的逐层传递 props。
一言以蔽之:跨级传值,状态共享。
看一个简单的例子,直接说用法。
首先,我将创建一个context.js文件(带有父子孙同目录),默认值是一个对象。
从“React”导入React;
const my context=react . create context({ text:' luck ' });
导出默认MyContext
然后,重写父组件,引入上下文,使用Provider将当前值传递给下面的组件树,value就是传递的值。
从“React”导入React;
从'导入孩子。/Children’;
从'导入MyContext。/context ';
类父扩展React。组件{
施工员(道具){
超级(道具);
}
//使用提供程序将当前值传递给下面的组件树。
//不管有多深,任何组件都可以读取这个值。
render(){
返回(
div style={ { background color:' # f7ba 2a ',填充:' 20px ',宽度:' 500px ',边距:' auto ',textAlign:'center'}}
p上下文通信实例/p
MyContext。提供商价值={{text:'祝您好运' }}
儿童/儿童
/MyContext。供应者
/div
)
}
}
导出默认父项
子组件是中间层,用于包装“孙子”组件,无需处理。
从“React”导入React;
从'导入孙子。/孙子';
班级儿童延伸反应。组件{
render(){
返回(
差异
孙子/外孙
/div
)
}
}
导出默认子项
添加一个“太阳”组件,也需要引入上下文,并在组件内部添加static contextType = MyContext。此时可以通过this.context直接得到上一级最近的提供者传递的值,此时this.context={text:good luck},即父组件传递值。
从“React”导入React;
从'导入MyContext。/context ';
课件孙子延伸反应。组件{
静态上下文类型=MyContext
render(){
返回(
div style={ { background color:' # 13ce 66 ',填充:' 10px ',宽度:' 200px ',边距:' auto ',marginTop:'20px'}}
通过上下文传递:/p
span style={ { color:' blue ' } } { this . context . text }/span
/div
)
}
}
导出默认子对象
通过this.context.text获取传递的值
以上是一个父子孙过程,也就是一个向下的过程。如果要上传值给父子孙,可以回调。
通过向传递的对象添加属性来修改父组件的值,其中父组件的方法值被绑定={{text:' goodluck ',toParent: this.fromgranson}}
从“React”导入React;
从'导入孩子。/Children’;
从'导入MyContext。/context ';
类父扩展React。组件{
施工员(道具){
超级(道具);
this.state={
邮件:“”
};
this . fromgranson=this . fromgranson . bind(this)
}
fromGranson(val){
this.setState({
消息:val
})
}
//使用提供程序将当前主题传递给下面的组件树。
//不管有多深,任何组件都可以读取这个值。
render(){
返回(
div style={ { background color:' # f7ba 2a ',填充:' 20px ',宽度:' 500px ',边距:' auto ',textAlign:'center'}}
p上下文通信实例/p
span style={ { color:' red ' } } { this。状态。msg }/span
我的上下文.提供商值={{text:'祝您好运,toParent:this.fromGranson}}
儿童/儿童
/MyContext .供应者
/div
)
}
}
导出默认父项
然后在孙组件中添加一个按钮,绑定方法,执行函数回调
顶级父项(){
this.context.toParent('孙组件向父组件传数据)
}
从“做出反应”导入做出反应;
从'导入我的上下文./context ';
从"元素-反应"导入{ Button }
课件孙子延伸反应。组件{
静态上下文类型=MyContext
施工员(道具){
超级(道具);
这个。到父=这个。敬父母。装订(这个)
}
顶级父项(){
this.context.toParent('孙组件向父组件传数据)
}
render(){
返回(
div style={ {背景色:' # 13ce 66 ',填充:' 10px ',宽度:' 200像素',边距:' auto ',marginTop:'20px'}}
p通过语境传过来:/p
span style={ { color:' blue ' } } { this。语境。text }/span
div按钮onClick={ this。给父母}上下文向上/按钮/div
/div
)
}
}
导出默认子对象
默认的页面为:
点击按钮之后,执行语境中的回调,向上传值。
不管层级有多深,都可以使用语境进行向下或向上传值。
注意:在下层组件中取的语境中的字段需与价值中传递字段保持一致100 .文本与托帕兰特
以上就是语境的大致使用,更多细节请往反应官方文档:
背景反应
三、兄弟(无嵌套)组件通信
当两个组件互不嵌套,处在同个层级或者不同层级上,他们之间要进行通信,有以下几种常用方法
1、某个组件先将值传到同一个父组件,然后在通过父组件传给另外一个组件,用到父子组件传值
2、使用缓存会话存储、本地存储等
3、如果两个组件之间存在跳转,可以使用路由跳转传值,附上详细用法
反应学习笔记-组件通信之路由传参(react-router-dom)_前端菜小白狮子座的博客CSDN博客
4、事件(发布-订阅)
首先,安装事件
npm安装事件-保存
新建一个event.js
从"事件"中导入{事件发射器};
导出默认的新事件发射器();
然后另两个组件处于同层级(不同个父组件或者不同层级都可以)
从“做出反应”导入做出反应;
从'导入孙子。/孙子;
从'导入孙子./孙子其他';
班级儿童延伸反应。组件{
render(){
返回(
差异
孙子/外孙
孙子/外孙
/div
)
}
}
导出默认子项
组件一,导入事件,在组件安装阶段添加监听addListener(订阅),在组件将卸载移除监听removeListener,事件名称与组件二中emit一致。
从“做出反应”导入做出反应;
'导入事件自'./event ';
从"元素-反应"导入{ Button }
课件孙子延伸反应。组件{
施工员(道具){
超级(道具);
this.state={
邮件:""
}
this.toOther=this.toOther
}
toOther(){
event.emit('eventMsg ','通过evnet传过来的值)
}
render(){
返回(
div style={ {背景色:' # 13ce 66 ',填充:' 10px ',宽度:' 200像素',边距:' auto ',marginTop:'20px'}}
p组件二/p
span style={ { color:' blue ' } } { this。状态。msg }/span
div按钮onClick={ this。toother }事件传值/按钮/div
/div
)
}
}
导出默认子对象
组件二,导入事件,按钮绑定方法,使用event.emit触发(发布)事件。
从“做出反应”导入做出反应;
'导入事件自'./event ';
从"元素-反应"导入{ Button }
课件孙子延伸反应。组件{
施工员(道具){
超级(道具);
this.state={
邮件:""
}
this.toOther=this.toOther
}
toOther(){
event.emit('eventMsg ','通过evnet传过来的值)
}
render(){
返回(
div style={ {背景色:' # 13ce 66 ',填充:' 10px ',宽度:' 200像素',边距:' auto ',marginTop:'20px'}}
p组件二/p
span style={ { color:' blue ' } } { this。状态。msg }/span
Button onclick={this.toother}事件传递值/Button/div
/div
)
}
}
导出默认子对象
点击按钮,组件2发布事件,组件1监控(订阅)事件,并更新内容。(如果发布者和订阅者的身份互换,则书写一致)
注意:如果两个组件使用event进行通信,请确保发布和订阅的事件名称是一致的,例如上面示例中的eventMsg。
总结:event的方法是灵活的,它可以用于与任何父子、跨级别、对等甚至不相关的组件进行通信。
四、路由传值
React学习笔记-react-router-dom用于组件通信
五、Redux
被释放。
总结:主要讲react中组件的常用通讯方式。在正常工作中,根据不同的应用场景选择不同的沟通方式,会让沟通过程更加简单明了。
对比Vue中组件的通信方式,你会发现很多相似之处:
Vue组件之间的通信(各种场景,容易理解,推荐收藏)
这就是本文关于React组件之间通信的三种方法(简单易用)。有关React组件之间通信的更多信息,请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们!
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。