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高级拖动技术 setCapture,releaseCapture
Jul 31 Javascript
js动态修改input输入框的type属性(实现方法解析)
Nov 13 Javascript
WEB前端设计师常用工具集锦
Dec 09 Javascript
jquery不常用方法汇总
Jul 26 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
Jun 02 Javascript
javascript滚轮事件基础实例讲解(37)
Feb 14 Javascript
借助node实战JSONP跨域实例
Mar 30 Javascript
Angular.js中数组操作的方法教程
Jul 31 Javascript
vue实现导航栏效果(选中状态刷新不消失)
Dec 13 Javascript
vue使用技巧及vue项目中遇到的问题
Jun 04 Javascript
LayerClose弹窗关闭刷新方法
Aug 17 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
详解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 cli 方式 在crotab中运行解决
2010/02/08 PHP
php 大数据量及海量数据处理算法总结
2011/05/07 PHP
PHP反射原理与用法深入分析
2019/09/28 PHP
bootstrap中模态框、模态框的属性实例详解
2017/02/17 Javascript
JavaScript编写一个贪吃蛇游戏
2017/03/09 Javascript
React Native 集成jpush-react-native的示例代码
2017/08/16 Javascript
JS设计模式之惰性模式(二)
2017/09/29 Javascript
js解决软键盘遮挡输入框的问题分享
2017/12/19 Javascript
vue.js 嵌套循环、if判断、动态删除的实例
2018/03/07 Javascript
深入浅析Vue中的slots/scoped slots
2018/04/03 Javascript
详解各版本React路由的跳转的方法
2018/05/10 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
2018/11/28 Javascript
vue的keep-alive中使用EventBus的方法
2019/04/23 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
2020/05/10 Javascript
Javascript前端下载后台传来的文件流代码实例
2020/08/18 Javascript
python多重继承实例
2014/10/11 Python
Python实现的HTTP并发测试完整示例
2020/04/23 Python
numpy中以文本的方式存储以及读取数据方法
2018/06/04 Python
Python xmltodict模块安装及代码实例
2020/10/05 Python
pymongo insert_many 批量插入的实例
2020/12/05 Python
美国家喻户晓的保健品品牌:Vitamin World(维他命世界)
2016/08/19 全球购物
Melijoe美国官网:法国奢侈童装购物网站
2017/04/19 全球购物
Lands’ End英国官方网站:高质量男女服装
2017/10/07 全球购物
全球知名的珠宝首饰品牌:Kay Jewelers
2018/02/11 全球购物
英国家庭、花园、汽车和移动解决方案:Easylife Group
2018/05/23 全球购物
中国领先的汽车保养服务平台:途虎养车
2019/10/18 全球购物
EJB3推出JPA的原因
2013/10/16 面试题
校长岗位职责
2013/11/26 职场文书
学校标语大全
2014/06/19 职场文书
洗手间标语
2014/06/23 职场文书
装配出错检讨书
2014/09/23 职场文书
2014年安全工作总结范文
2014/11/13 职场文书
原告离婚代理词
2015/05/23 职场文书
幼儿园迎新生欢迎词
2015/09/30 职场文书
利用python Pandas实现批量拆分Excel与合并Excel
2021/05/23 Python
Spring Boot接口定义和全局异常统一处理
2022/04/20 Java/Android