react常用组件及作用,react 组件传递数据

react常用组件及作用,react 组件传递数据,React组件间通信的三种方法(简单易用)

反应知识中一个主要内容便是组件之间的通信,以下列举几种常用的组件通信方式,本文就详细的介绍一下,感兴趣的可以了解一下

目录

一、父子组件通信二、跨级组件通信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组件之间通信的更多信息,请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们!

react常用组件及作用,react 组件传递数据