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 相关文章推荐
JS 分号引起的一段调试问题
Jun 18 Javascript
基于jquery的web页面日期格式化插件
Nov 15 Javascript
动态加载script文件的两种方法
Aug 15 Javascript
jquery处理json数据实例分析
Jun 03 Javascript
js操作模态窗口及父子窗口间相互传值示例
Jun 09 Javascript
javascript中caller和callee详解
Aug 10 Javascript
改变checkbox默认选中状态及取值的实现代码
May 26 Javascript
seajs模块之间依赖的加载以及模块的执行
Oct 21 Javascript
JS前端加密算法示例
Dec 22 Javascript
微信小程序实战之运维小项目
Jan 17 Javascript
使用异步组件优化Vue应用程序的性能
Apr 28 Javascript
vue计算属性无法监听到数组内部变化的解决方案
Nov 06 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
php 定界符格式引起的错误
2011/05/24 PHP
php中的注释、变量、数组、常量、函数应用介绍
2012/11/16 PHP
PHP连接SQLServer2005方法及代码
2013/12/26 PHP
PHP多进程之pcntl_fork的实例详解
2017/10/15 PHP
分享别人写的一个小型js框架
2007/08/13 Javascript
各情景下元素宽高的获取实现代码
2011/09/13 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
2014/11/20 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
2016/08/08 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
2016/10/19 Javascript
详解webpack+angular2开发环境搭建
2017/06/28 Javascript
vue中created和mounted的区别浅析
2019/08/13 Javascript
JavaScript设计模型Iterator实例解析
2020/01/22 Javascript
[02:51]DOTA2战队出征照拍摄花絮 TI3明星化身时尚男模
2013/07/22 DOTA
[02:49]2014DOTA2电竞也是体育项目! 势要把荣誉带回中国!
2014/07/20 DOTA
[01:10:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第一场 3月4日
2021/03/11 DOTA
python黑魔法之参数传递
2016/02/12 Python
新手如何快速入门Python(菜鸟必看篇)
2017/06/10 Python
利用python获取Ping结果示例代码
2017/07/06 Python
对Tensorflow中的变量初始化函数详解
2018/07/27 Python
python实现移位加密和解密
2019/03/22 Python
python如何实现单链表的反转
2020/02/10 Python
python PyAUtoGUI库实现自动化控制鼠标键盘
2020/09/09 Python
Python爬虫新手入门之初学lxml库
2020/12/20 Python
英国护发和美妆在线商店:Klip Shop
2019/03/24 全球购物
美国家用和厨房电器销售网站:Appliances Connection
2020/01/24 全球购物
护士个人简历自荐信
2013/10/18 职场文书
实习单位接收函
2014/01/11 职场文书
自考生自我评价分享
2014/01/18 职场文书
青蓝工程实施方案
2014/03/27 职场文书
党员岗位承诺口号大全
2014/03/28 职场文书
经济贸易专业自荐信
2014/06/11 职场文书
2014年高校辅导员工作总结
2014/12/09 职场文书
小学少先队辅导员述职报告
2015/01/10 职场文书
办公室个人总结
2015/02/28 职场文书
中国文明网2015年“向国旗敬礼”活动网上签名寄语
2015/09/24 职场文书
2019年手机市场的调研报告2篇
2019/10/10 职场文书