react 兄弟组件如何调用对方的方法示例


Posted in Javascript onOctober 23, 2018

最近有一个场景是Child2组件点击让Child1组件里面的state的值发生改变,Child1是一个公用组件,把里面的state值改为props传递,修改内容太多,容易出错,就想找其他的方法来解决兄弟组件调用方法问题,下面看代码:

Child1 是第一个子组件

class Child1 extends React.Component {
 constructor(props) {
  super(props);
  this.state = {
   text:'Child1'
  };
 }
 onChange=()=>{
  this.setState({
   text:'Child1 onChange'
  })
 }
 componentDidMount(){
  this.props.onRef&&this.props.onRef(this)
 }

 render() {
  return (
   <div>{this.state.text}</div>
  );
 }
}

是第二个子组件,和Child1是兄弟组件;

class Child2 extends React.Component {
 constructor(props) {
  super(props);
  this.state = {
  };
 }

 render() {
  return (
   <div onClick={this.props.onClick}>Child2</div>
  );
 }
}

home 父组件

class Home extends React.Component {

 constructor(props) {
  super(props);
  this.state = {
  };
 }
 onRef=(ref)=>{
  this.child1=ref;
 }

 render() {
  return (
   <div className="home">
    <Child1 onRef={this.onRef}/>
    <Child2 onClick={
     ()=>{
      this.child1.onChange&&this.child1.onChange()
     }
    } />
    </div>
  );
 }
}

分析

  • 第一步:在Child1组件的componentDidMount生命周期里面加上this.props.onRef(this),把Child1都传递给父组件,
  • 第二步父组件里面 <Child1 onRef={this.onRef}/> this.onRef方法为onRef=(ref)=>{this.child1=ref;};
  • 第三步 Child2组件触发一个事件的时候,就可以直接这样调用this.child1.onChange(),Child1组件里面就会直接调用onChange函数,修改text为Child1 onChange;

到这里就可以实现调用兄弟组件,其实还是用父组件做了中间传递。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 1.4 15个你应该知道的新特性(译)
Jan 24 Javascript
jquery五角星评分插件示例分享
Feb 21 Javascript
javasctipt如何显示几分钟前、几天前等
Apr 30 Javascript
AngularJS基础教程之简单介绍
Sep 27 Javascript
一种新的javascript对象创建方式Object.create()
Dec 28 Javascript
Bootstrap每天必学之折叠(Collapse)插件
Apr 25 Javascript
jquery html动态添加的元素绑定事件详解
May 24 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
May 31 Javascript
教你JS中的运算符乘方、开方及变量格式转换
Aug 09 Javascript
分分钟玩转Vue.js组件
Oct 25 Javascript
Angularjs单选框相关的示例代码
Aug 17 Javascript
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
详解React 的几种条件渲染以及选择
Oct 23 #Javascript
详解create-react-app 2.0版本如何启用装饰器语法
Oct 23 #Javascript
彻底弄懂 JavaScript 执行机制
Oct 23 #Javascript
深入理解JavaScript 中的执行上下文和执行栈
Oct 23 #Javascript
浅谈JavaScript 代码整洁之道
Oct 23 #Javascript
使用jquery Ajax实现上传附件功能
Oct 23 #jQuery
详解如何构建Promise队列实现异步函数顺序执行
Oct 23 #Javascript
You might like
基于PHP后台的Android新闻浏览客户端
2016/05/23 PHP
php使用str_shuffle()函数生成随机字符串的方法分析
2017/02/17 PHP
PHP的mysqli_stmt_init()函数讲解
2019/01/24 PHP
event.srcElement 用法笔记e.target
2009/12/18 Javascript
jquery validate poshytip 自定义样式
2012/11/26 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
2013/06/25 Javascript
没有document.getElementByName方法
2013/08/19 Javascript
js中reverse函数的用法详解
2013/12/26 Javascript
纯js写的分页表格数据为json串
2014/02/18 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
2014/04/03 Javascript
使用jQuery设置disabled属性与移除disabled属性
2014/08/21 Javascript
javascript的push使用指南
2014/12/05 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
2014/12/29 Javascript
javascript+html5实现绘制圆环的方法
2015/07/28 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
2015/08/26 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
2016/02/17 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
2016/05/09 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
2016/07/01 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
2016/09/17 Javascript
解决vue router使用 history 模式刷新后404问题
2017/07/19 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
2018/09/27 Javascript
手把手教你实现 Promise的使用方法
2020/09/02 Javascript
Vue3 实现双盒子定位Overlay的示例
2020/12/22 Vue.js
使用python 爬虫抓站的一些技巧总结
2018/01/10 Python
python处理DICOM并计算三维模型体积
2019/02/26 Python
PyQt4编程之让状态栏显示信息的方法
2019/06/18 Python
python正则表达式匹配不包含某几个字符的字符串方法
2019/07/23 Python
讲解Python3中NumPy数组寻找特定元素下标的两种方法
2019/08/04 Python
html5中audio支持音频格式的解决方法
2018/08/24 HTML / CSS
Lookfantastic西班牙官网:英国知名美妆购物网站
2018/06/13 全球购物
意大利中国电子产品购物网站:Geekmall.com
2019/09/30 全球购物
餐厅销售主管职责范本
2014/02/19 职场文书
小学生倡议书范文
2014/05/13 职场文书
刑事代理授权委托书
2014/09/17 职场文书
2015年元旦标语大全
2014/12/09 职场文书
解决pytorch-gpu 安装失败的记录
2021/05/24 Python