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 相关文章推荐
IE8 chrome中table隔行换色解决办法
Jul 09 Javascript
JavaScript 对象模型 执行模型
Oct 15 Javascript
淘宝搜索框效果实现分析
Mar 05 Javascript
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
Feb 27 Javascript
event对象获取方法总结在google浏览器下测试
Nov 03 Javascript
jquery的map与get方法详解
Nov 04 Javascript
js截取中英文字符串、标点符号无乱码示例解读
Apr 17 Javascript
用Jquery选择器计算table中的某一列某一行的合计
Aug 13 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
Nov 18 Javascript
浅析script标签中的defer与async属性
Nov 30 Javascript
react.js 翻页插件实例代码
Jan 19 Javascript
echarts饼图扇区添加点击事件的实例
Oct 16 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
福利彩票幸运号码自动生成器
2006/10/09 PHP
推荐Discuz!5的PHP代码高亮显示与实现可运行代码
2007/03/15 PHP
PHP写MySQL数据 实现代码
2009/06/15 PHP
php json_encode()函数返回json数据实例代码
2014/10/10 PHP
PHP遍历XML文档所有节点的方法
2015/03/12 PHP
用php代码限制国内IP访问我们网站
2015/09/26 PHP
利用php输出不同的心形图案
2016/04/22 PHP
Firebug入门指南(Firefox浏览器)
2010/08/21 Javascript
js substr、substring和slice使用说明小记
2011/09/15 Javascript
jquery easyui combox一些实用的小方法
2013/12/25 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
2014/05/11 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
2014/06/26 Javascript
javascript继承机制实例详解
2014/11/20 Javascript
js中日期的加减法
2015/05/06 Javascript
js实现图片无缝滚动特效
2020/03/19 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
2016/06/07 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
2016/08/25 Javascript
AngularJS 打开新的标签页实现代码
2017/09/07 Javascript
vue项目中axios使用详解
2018/02/07 Javascript
基于Vue sessionStorage实现保留搜索框搜索内容
2020/06/01 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
2020/08/13 Javascript
Python实现获取网站PR及百度权重
2015/01/21 Python
python选择排序算法实例总结
2015/07/01 Python
python和flask中返回JSON数据的方法
2018/03/26 Python
python 遍历pd.Series的index和value
2019/11/26 Python
Python中的全局变量如何理解
2020/06/04 Python
aden + anais英国官网:美国婴儿贴身用品品牌
2019/09/08 全球购物
毕业生的自我评价范文
2013/12/31 职场文书
新三好学生主要事迹
2014/01/23 职场文书
优秀求职信范文分享
2014/01/26 职场文书
解放思想演讲稿
2014/09/11 职场文书
2015年团支书工作总结
2015/04/03 职场文书
大学生暑假实习总结
2015/07/13 职场文书
写作技巧:优秀文案必备的3种结构
2019/08/19 职场文书
python 定义函数 返回值只取其中一个的实现
2021/05/21 Python
Python自动化之批量处理工作簿和工作表
2021/06/03 Python