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 相关文章推荐
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
Jul 31 Javascript
关于JS中的闭包浅谈
Aug 23 Javascript
jquery获取当前日期的方法
Jan 14 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
Aug 24 Javascript
深入理解React中何时使用箭头函数
Aug 23 Javascript
vue系列之动态路由详解【原创】
Sep 10 Javascript
html中通过JS获取JSON数据并加载的方法
Nov 30 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
May 04 Javascript
微信小程序websocket实现聊天功能
Mar 30 Javascript
Vue-input框checkbox强制刷新问题
Apr 18 Javascript
ng-alain的sf如何自定义部件的流程
Jun 12 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
Nov 24 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输出控制功能在简繁体转换中的应用
2006/10/09 PHP
Php注入点构造代码
2008/06/14 PHP
Windows下利用Gvim写PHP产生中文乱码问题解决方法
2011/04/20 PHP
5种PHP创建数组的实例代码分享
2014/01/17 PHP
推荐十款免费 WordPress 插件
2015/03/24 PHP
PHP读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
CI框架中$this-&gt;load-&gt;library()用法分析
2016/05/18 PHP
js将控件隐藏的方法及display属性介绍
2013/07/04 Javascript
js二维数组排序的简单示例代码
2014/01/24 Javascript
JavaScript 对象深入学习总结(经典)
2015/09/29 Javascript
jQueryUI DatePicker 添加时分秒
2016/06/04 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
2017/01/22 Javascript
js实现华丽的九九乘法表效果
2017/03/29 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
js中的闭包学习心得
2018/02/06 Javascript
vue使用vue-i18n实现国际化的实现代码
2018/04/08 Javascript
js实现图片推拉门效果代码实例
2019/05/18 Javascript
[01:02:48]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 LGD vs OG
2018/04/02 DOTA
总结Python中逻辑运算符的使用
2015/05/13 Python
使用py2exe在Windows下将Python程序转为exe文件
2016/03/04 Python
Python利用IPython提高开发效率
2016/08/10 Python
Linux 下 Python 实现按任意键退出的实现方法
2016/09/25 Python
Python冲顶大会 快来答题!
2018/01/17 Python
详解python爬虫系列之初识爬虫
2019/04/06 Python
python爬虫爬取笔趣网小说网站过程图解
2019/11/18 Python
Matplotlib scatter绘制散点图的方法实现
2020/01/02 Python
代码总结Python2 和 Python3 字符串的区别
2020/01/28 Python
浅谈python3 构造函数和析构函数
2020/03/12 Python
html5 横向滑动导航栏的方法示例
2020/05/08 HTML / CSS
采购部主管岗位职责
2014/01/01 职场文书
2014年共青团工作总结
2014/12/10 职场文书
运动会闭幕词
2015/01/28 职场文书
Java新手教程之ArrayList的基本使用
2021/06/20 Java/Android
如何基于python实现单目三维重建详解
2022/06/25 Python
win10滚动条自动往上跑怎么办?win10滚动条自动往上跑的解决方法
2022/08/05 数码科技
Win11 vmware不兼容怎么办?Win11与VMware虚拟机不兼容的解决方法
2023/01/09 数码科技