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 BASE64编码 window.atob(), window.btoa()
Mar 09 Javascript
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
May 14 Javascript
javascript匿名函数应用示例介绍
Mar 07 Javascript
Javascript数组操作函数总结
Feb 05 Javascript
JavaScript通过prototype给对象定义属性用法实例
Mar 23 Javascript
jquery mobile界面数据刷新的实现方法
May 28 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
Sep 17 Javascript
JavaScript实现的微信二维码图片生成器的示例
Oct 26 Javascript
javascript实现复选框全选或反选
Feb 04 Javascript
Kotlin学习第一步 kotlin语法特性
May 25 Javascript
手把手带你封装一个vue component第三方库
Feb 14 Javascript
简单了解前端渐进式框架VUE
Jul 20 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
ThinkPHP实现动态包含文件的方法
2014/11/29 PHP
Ajax实现对静态页面的文章访问统计功能示例
2016/10/10 PHP
注释PHP和html混合代码的小技巧(分享)
2016/11/03 PHP
Laravel如何实现适合Api的异常处理响应格式
2020/06/14 PHP
如何实现浏览器上的右键菜单
2006/07/10 Javascript
JQuery 网站换肤功能实现代码
2009/11/02 Javascript
JavaScript 的继承
2011/10/01 Javascript
现如今最流行的JavaScript代码规范
2014/03/08 Javascript
html文本框提示效果的示例代码
2014/06/28 Javascript
使用javascript实现简单的选项卡切换
2015/01/09 Javascript
详解JavaScript RegExp对象
2017/02/04 Javascript
JavaScript Base64 作为文件上传的实例代码解析
2017/02/14 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
2017/07/26 Javascript
AngularJS遍历获取数组元素的方法示例
2017/11/11 Javascript
在vue中使用公共过滤器filter的方法
2018/06/26 Javascript
实现Vue的markdown文档可以在线运行的方法示例
2018/12/11 Javascript
在vue中封装方法以及多处引用该方法详解
2020/08/14 Javascript
JS实现炫酷雪花飘落效果
2020/08/19 Javascript
vue项目配置同一局域网可使用ip访问的操作
2020/10/23 Javascript
[47:50]Secret vs VP 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[02:23]完美世界全国高校联赛街访DOTA2第一期
2019/11/28 DOTA
[52:37]完美世界DOTA2联赛循环赛 Forest vs DM BO2第一场 10.29
2020/10/29 DOTA
Python日志模块logging简介
2015/04/13 Python
在PyCharm中三步完成PyPy解释器的配置的方法
2018/10/29 Python
jupyter note 实现将数据保存为word
2020/04/14 Python
vscode写python时的代码错误提醒和自动格式化的方法
2020/05/07 Python
Python调用系统命令os.system()和os.popen()的实现
2020/12/31 Python
HTML5 Canvas——用路径描画线条实例介绍
2013/06/09 HTML / CSS
Book Depository澳大利亚:世界领先的专业在线书店之一
2018/12/27 全球购物
新闻记者实习自我鉴定
2013/09/19 职场文书
不忘国耻振兴中华演讲稿
2014/05/14 职场文书
中学教师读书笔记
2015/07/01 职场文书
小学生暑假安全公约
2015/07/14 职场文书
导游词之太原天龙山
2020/01/02 职场文书
解决MySQL报“too many connections“错误
2022/04/19 MySQL