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的文件是什么文件
Dec 06 Javascript
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
Dec 02 Javascript
escape、encodeURI 和 encodeURIComponent 的区别
Mar 02 Javascript
Mootools 1.2教程 类(一)
Sep 15 Javascript
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
Feb 04 Javascript
AngularJS入门教程之学习环境搭建
Dec 06 Javascript
使用Javascript写的2048小游戏
Nov 25 Javascript
JavaScript脚本库编写的方法
Dec 09 Javascript
jQuery下拉框的简单应用
Jun 24 Javascript
简单实现AngularJS轮播图效果
Apr 10 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
Jul 23 Javascript
vue根据条件不同显示不同按钮的操作
Aug 04 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 shell超强免杀、减少体积工具实现代码
2012/10/16 PHP
php常用字符串String函数实例总结【转换,替换,计算,截取,加密】
2016/12/07 PHP
对YUI扩展的Gird组件 Part-2
2007/03/10 Javascript
一个可拖拽列宽表格实例演示
2012/11/26 Javascript
js控制表单不能输入空格的小例子
2013/11/20 Javascript
控制台报错object is not a function的解决方法
2014/08/24 Javascript
jQuery中not()方法用法实例
2015/01/06 Javascript
Javascript实现Web颜色值转换
2015/02/05 Javascript
JavaScript生成SQL查询表单的方法
2015/08/13 Javascript
JavaScript预解析及相关技巧分析
2016/04/21 Javascript
JavaScript每天必学之基础知识
2016/09/17 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
2016/12/23 Javascript
基于JavaScript实现窗口拖动效果
2017/01/18 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
2017/02/21 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
2017/05/15 jQuery
基于Datatables跳转到指定页的简单实例
2017/11/09 Javascript
Vue2.0 v-for filter列表过滤功能的实现
2018/09/07 Javascript
JS中FormData类实现文件上传
2020/03/27 Javascript
JavaScript进阶(一)变量声明提升实例分析
2020/05/09 Javascript
Python3.5多进程原理与用法实例分析
2019/04/05 Python
python中for循环把字符串或者字典添加到列表的方法
2019/07/20 Python
Python企业编码生成系统之系统主要函数设计详解
2019/07/26 Python
django 实现简单的插入视频
2020/04/07 Python
如何用Python提取10000份log中的产品信息
2021/01/14 Python
python实现简单文件读写函数
2021/02/25 Python
使用css3匹配手机屏幕横竖状态
2014/01/27 HTML / CSS
德国高性价比网上药店:medpex
2017/07/09 全球购物
如何执行一个shell程序
2012/11/23 面试题
专业销售业务员求职信
2013/11/18 职场文书
配件采购员岗位职责
2013/12/03 职场文书
人力资源经理的岗位职责范本
2014/02/28 职场文书
2014流动人口计划生育工作总结
2014/12/20 职场文书
公司员工奖惩制度
2015/08/04 职场文书
前端监听websocket消息并实时弹出(实例代码)
2021/11/27 Javascript
MySQL实战记录之如何快速定位慢SQL
2022/03/23 MySQL
【DOTA2】总决赛血虐~ XTREME GAMING vs MAGMA - OGA DOTA PIT 2022 CN
2022/04/02 DOTA