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 相关文章推荐
Javascript学习笔记9 prototype封装继承
Jan 11 Javascript
如何让页面加载完成后执行js
Jun 26 Javascript
javascript跨浏览器的属性判断方法
Mar 16 Javascript
用js的document.write输出的广告无阻塞加载的方法
Jun 05 Javascript
JavaScript数据结构和算法之图和图算法
Feb 11 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
Apr 12 Javascript
javascript实现框架高度随内容改变的方法
Jul 23 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
Oct 31 Javascript
jquery——九宫格大转盘抽奖实例
Jan 16 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
解决vue页面刷新或者后退参数丢失的问题
Mar 13 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
Dec 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
跟我学小偷程序之成功偷取首页(第三天)
2006/10/09 PHP
PHP spl_autoload_register实现自动加载研究
2011/12/06 PHP
php 数组元素快速去重
2017/05/05 PHP
php实现简单的权限管理的示例代码
2017/08/25 PHP
thinkPHP5实现数据库添加内容的方法
2017/10/25 PHP
js 页面执行时间计算代码
2009/03/04 Javascript
js 函数调用模式小结
2011/12/26 Javascript
使用jQuery判断浏览器滚动条位置的方法
2016/05/30 Javascript
微信小程序 页面传参实例详解
2016/11/16 Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
2016/12/21 Javascript
JS中的phototype详解
2017/02/04 Javascript
原生JS实现图片翻书效果
2017/02/16 Javascript
利用JS实现scroll自定义滚动效果详解
2017/10/17 Javascript
electron demo项目npm install安装失败的解决方法
2018/02/06 Javascript
在vue中v-bind使用三目运算符绑定class的实例
2018/09/29 Javascript
详解vue-router数据加载与缓存使用总结
2018/10/29 Javascript
javascript系统时间设置操作示例
2019/06/17 Javascript
前端Vue项目详解--初始化及导航栏
2019/06/24 Javascript
解决vue 子组件修改父组件传来的props值报错问题
2019/11/09 Javascript
Vue 简单实现前端权限控制的示例
2020/12/25 Vue.js
[03:49]DOTA2英雄基础教程 光之守卫
2014/01/14 DOTA
[01:02:05]LGD vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python实现人人网登录示例分享
2014/01/19 Python
Python解决鸡兔同笼问题的方法
2014/12/20 Python
Python求导数的方法
2015/05/09 Python
python使用urllib2提交http post请求的方法
2015/05/26 Python
pycharm: 恢复(reset) 误删文件的方法
2018/10/22 Python
Python 实现文件打包、上传与校验的方法
2019/02/13 Python
python+os根据文件名自动生成文本
2019/03/21 Python
opencv 图像腐蚀和图像膨胀的实现
2020/07/07 Python
安德玛加拿大官网:Under Armour加拿大
2019/10/02 全球购物
成立公司计划书
2014/05/07 职场文书
建国大业观后感600字
2015/06/01 职场文书
大学班干部竞选稿
2015/11/20 职场文书
MySQL外键约束(FOREIGN KEY)案例讲解
2021/08/23 MySQL
详解MySQL的内连接和外连接
2023/05/08 MySQL