反应组件通信的案例分析 - 行业资讯 - 肥雀云

　　介绍

这篇文章将为大家详细讲解有关反应组件通信的案例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

最近闲来无事自学反应框架,自学过程中所有的问题经验都会在此记录,希望可以帮助到学习反应框架的同学,废话不多说上代码。
首先是父传子:

进口反应,{组件}& # 39;反应# 39;; 　　从& # 39;进口Com1。/componments Com1 # 39; 　　　　类应用扩展组件{ 　　构造函数(道具){ 　　超级(道具) 　　这一点。状态={ 　　加勒比海盗:[{ 　　“userName":“fangMing"“text":“123333”,“result":没错　　},{ 　　“userName":“zhangSan"“text":“345555”,“result":假的　　},{ 　　“userName":“liSi"“text":“567777”,“result":没错　　},{ 　　“userName":“wangWu"“text":“789999”,“result":没错　　}), 　　}; 　　这一点。foo=拔依醋愿缸榧?//这个也是父传子方法,可能初学者有点迷,刚开始我也用来和arr={this.state.arr}做区分　　}; 　　呈现(){ 　　回报( 　　& lt; div className=癆pp"祝辞　　& lt;头className=癆pp-header"祝辞　　& lt; img src=https://www.yisu.com/zixun/{标志}className=癆pp-logo”alt="标志"/> 　　　　　　

　　); 　　} 　　} 　　出口默认应用程序;

子组件:

进口反应,{组件}& # 39;反应# 39;; 　　　　类避署扩展组件{ 　　构造函数(道具){ 　　超级(道具) 　　}; 　　呈现(){ 　　回报( 　　& lt; div> 　　& lt; h2>你好,{this.props.age} & lt;/h2> 　　& lt; p> {this.props.fn} & lt;/p> 　　& lt; ul> 　　｛　　this.props.arr。地图(项=比;{//这个地方通过this.props.arr接收到父组件传过来的加勒比海盗,然后在{}里面进行js的循环　　回报( 　　李& lt;关键={item.userName}比; 　　{项目。用户名}评论是:{item.text} 　　& lt;/li> 　　) 　　}）　　} 　　& lt;/ul> 　　& lt;/div> 　　); 　　}; 　　} 　　　　出口违约损失元素;

结果显示:

以上是父传子的方法,主要还是使用道具传值,下面看看子传父。

子传父:
首先是子组件:

进口反应,{组件}& # 39;反应# 39;; 　　　　类避署扩展组件{ 　　构造函数(道具){ 　　超级(道具); 　　这一点。状态=({ 　　childText:“我来自子组件, 　　}）　　}; 　　clickFun(文本){//定义触发的方法　　this.props.pfn(文本)//这个地方把值传递给了道具的事件当中　　} 　　呈现(){ 　　回报( 　　& lt; div> 　　{/*通过事件进行传值,如果想得到事件,可以在参数最后加一个事件, 　　这个地方还是要强调,这个,这个,这个*/} 　　& lt;按钮>进口反应,{组件}& # 39;反应# 39;; 　　从& # 39;进口Com1。/componments Com1 # 39; 　　　　类应用扩展组件{ 　　构造函数(道具){ 　　超级(道具) 　　这一点。状态={ 　　parentText:“现在是父组件,, 　　}; 　　fn(数据){ 　　this.setState ({ 　　parentText:数据//把父组件中的parentText替换为子组件传递的值　　}()=祝辞{ 　　console.log (this.state.parentText);//设置状态是异步操作,但是我们可以在它的回调函数里面进行操作　　}); 　　}; 　　呈现(){ 　　回报( 　　& lt; div className=癆pp"祝辞　　& lt; Com1 pfn={this.fn.bind()}/比;{/*通过绑定事件进行值的运算,这个地方一定要记得.bind(这),不然会报错,切记切记,因为通过事件传递的时候这的指向已经改变*/} 　　& lt; p>文本是{this.state.parentText} & lt;/p> 　　& lt;/div> 　　); 　　} 　　} 　　出口默认应用程序;

关于反应组件通信的案例分析就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。