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函数
Dec 22 Javascript
jQuery boxy弹出层插件中文演示及使用讲解
Feb 24 Javascript
JavaScript对象创建及继承原理实例解剖
Feb 28 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
Nov 26 Javascript
js判断浏览器版本以及浏览器内核的方法
Jan 20 Javascript
jQuery中的通配符选择器使用总结
May 30 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
Jun 12 Javascript
你知道setTimeout是如何运行的吗?
Aug 16 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
Aug 24 Javascript
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
Nuxt页面级缓存的实现
Mar 09 Javascript
js 解析 JSON 数据简单示例
Apr 21 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闭包实例解析
2014/09/08 PHP
浅谈本地WAMP环境的搭建
2015/05/13 PHP
利用PHP实现一个简单的用户登记表示例
2017/04/25 PHP
让您的菜单不离网站
2006/10/03 Javascript
用jQuery简化JavaScript开发分析
2009/02/19 Javascript
js arguments对象应用介绍
2012/11/28 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
2015/08/25 Javascript
BootStrap glyphicons 字体图标实现方法
2016/05/01 Javascript
简单总结JavaScript中的String字符串类型
2016/05/26 Javascript
微信小程序 SocketIO 实例讲解
2016/10/13 Javascript
Angular5给组件本身的标签添加样式class的方法
2018/04/07 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
2018/04/19 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
2018/08/24 Javascript
一些手写JavaScript常用的函数汇总
2019/04/16 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
2019/10/12 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
2020/04/20 Javascript
python 装饰器功能以及函数参数使用介绍
2012/01/27 Python
利用python操作SQLite数据库及文件操作详解
2017/09/22 Python
Python使用Phantomjs截屏网页的方法
2018/05/17 Python
python打印9宫格、25宫格等奇数格 满足横竖斜相加和相等
2019/07/19 Python
Python中Subprocess的不同函数解析
2019/12/10 Python
Python使用内置函数setattr设置对象的属性值
2020/10/16 Python
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
2014/09/02 HTML / CSS
CSS3中的content属性使用示例
2015/07/20 HTML / CSS
HTML5 Canvas概述
2009/08/26 HTML / CSS
倩碧香港官方网站:Clinique香港
2017/11/13 全球购物
C#中类(class)与结构(struct)的异同
2013/11/03 面试题
网络工程师专家职业发展路线
2014/02/14 职场文书
公司总经理岗位职责范本
2014/08/15 职场文书
2014年校长工作总结
2014/12/11 职场文书
《火烧云》教学反思
2016/02/23 职场文书
高三英语教学反思
2016/03/03 职场文书
车辆挂靠协议书
2016/03/23 职场文书
2016年社区文体活动总结
2016/04/06 职场文书
2019最新激励员工口号大全!
2019/06/28 职场文书
python b站视频下载的五种版本
2021/05/27 Python