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 隔行换色 支持键盘上下键,按Enter选定值
Aug 02 Javascript
ExtJS4 组件化编程,动态加载,面向对象,Direct
May 12 Javascript
ajax请求get与post的区别总结
Nov 04 Javascript
使用jquery.qrcode生成彩色二维码实例
Aug 08 Javascript
JavaScript立即执行函数的三种不同写法
Sep 05 Javascript
javascript动态创建表格及添加数据实例详解
May 13 Javascript
jQuery动画效果图片轮播特效
Jan 12 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
Aug 05 Javascript
JS快速实现移动端拼图游戏
Sep 05 Javascript
JavaScript中的ajax功能的概念和示例详解
Oct 17 Javascript
JavaScript基础之流程控制语句的用法
Aug 31 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
Nov 30 Javascript
详解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
javascript 点击整页变灰的效果(可做退出效果)。
2008/01/09 Javascript
5秒后跳转到另一个页面的js代码
2013/10/12 Javascript
Node.js实现在目录中查找某个字符串及所在文件
2014/09/03 Javascript
Shell脚本实现Linux系统和进程资源监控
2015/03/05 Javascript
ECMAScript5(ES5)中bind方法使用小结
2015/05/07 Javascript
jQuery EasyUI之DataGrid使用实例详解
2016/01/04 Javascript
requireJS使用指南
2016/04/27 Javascript
ES6中Math对象新增的方法实例详解
2017/04/25 Javascript
Easy UI动态树点击文字实现展开关闭功能
2017/09/30 Javascript
老生常谈JS中的继承及实现代码
2018/07/06 Javascript
tweenjs缓动算法的使用实例分析
2019/08/26 Javascript
微信小程序左滑删除实现代码实例
2019/09/16 Javascript
原生JS无缝滑动轮播图
2019/10/22 Javascript
如何使用Javascript中的this关键字
2020/05/28 Javascript
vue实现div单选多选功能
2020/07/16 Javascript
vant 中van-list的用法说明
2020/11/11 Javascript
centos6.7安装python2.7.11的具体方法
2017/01/16 Python
pandas 将索引值相加的方法
2018/11/15 Python
Python计算库numpy进行方差/标准方差/样本标准方差/协方差的计算
2018/12/28 Python
在python带权重的列表中随机取值的方法
2019/01/23 Python
Python3.5 Pandas模块缺失值处理和层次索引实例详解
2019/04/23 Python
Win10环境python3.7安装dlib模块趟过的坑
2019/08/01 Python
Python ORM编程基础示例
2020/02/02 Python
Python图片处理模块PIL操作方法(pillow)
2020/04/07 Python
Python面试题:如何用Python来发送邮件
2016/03/15 面试题
大学生简历中个人的自我评价
2013/10/06 职场文书
关于幼儿的自我评价
2013/12/18 职场文书
六一儿童节主持词
2014/03/21 职场文书
《祁黄羊》教学反思
2014/04/22 职场文书
新闻专业毕业生求职信
2014/08/08 职场文书
北京离婚协议书范文2014
2014/09/29 职场文书
先进工作者个人总结
2015/02/15 职场文书
遗愿清单观后感
2015/06/09 职场文书
解决jupyter notebook图片显示模糊和保存清晰图片的操作
2021/04/24 Python
引用计数法和root搜索算法以及JVM中判定对象需要回收的方法
2022/04/19 Java/Android
Golang入门之计时器
2022/05/04 Golang