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+JSP checkBox 全选具体实现
Jan 02 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
Nov 07 Javascript
Angular 4.x中表单Reactive Forms详解
Apr 25 Javascript
原生js简单实现放大镜特效
May 16 Javascript
vue中锚点的三种方法
Jul 06 Javascript
解决vue 项目引入字体图标报错、不显示等问题
Sep 01 Javascript
详解微信小程序中组件通讯
Oct 30 Javascript
element-ui table span-method(行合并)的实现代码
Dec 20 Javascript
Vue2 添加数据可视化支持的方法步骤
Jan 02 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
May 22 Javascript
JS实现动态星空背景效果
Nov 01 Javascript
JavaScript中layim之整合右键菜单的示例代码
Feb 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
探讨:web上存漏洞及原理分析、防范方法
2013/06/29 PHP
php版小黄鸡simsimi聊天机器人接口分享
2014/01/26 PHP
PHP函数func_num_args用法实例分析
2015/12/07 PHP
php实现在线通讯录功能(附源码)
2016/05/13 PHP
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
2010/02/15 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
2013/10/22 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
2015/11/26 Javascript
学JavaScript七大注意事项【必看】
2016/05/04 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
2016/06/06 Javascript
AngularJs directive详解及示例代码
2016/09/01 Javascript
js仿新浪微博消息发布功能
2017/02/17 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
webpack4 css打包压缩问题的解决
2018/05/18 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
2018/08/30 Javascript
vue+iview 兼容IE11浏览器的实现方法
2019/01/07 Javascript
Nodejs对postgresql基本操作的封装方法
2019/02/20 NodeJs
[01:38]DOTA2辉夜杯 欢乐的观众现场采访
2015/12/26 DOTA
Python3实现生成随机密码的方法
2014/08/23 Python
python通过zlib实现压缩与解压字符串的方法
2014/11/19 Python
python调用机器喇叭发出蜂鸣声(Beep)的方法
2015/03/23 Python
Python爬虫DOTA排行榜爬取实例(分享)
2017/06/13 Python
python合并同类型excel表格的方法
2018/04/01 Python
利用Python在一个文件的头部插入数据的实例
2018/05/02 Python
使用pycharm设置控制台不换行的操作方法
2019/01/19 Python
django 实现简单的插入视频
2020/04/07 Python
Django vue前后端分离整合过程解析
2020/11/20 Python
德国综合购物网站:OTTO
2018/11/13 全球购物
简述进程的启动、终止的方式以及如何进行进程的查看
2013/07/12 面试题
医院护士的求职信
2014/01/03 职场文书
生日宴会主持词
2014/03/20 职场文书
合同协议书格式
2014/04/18 职场文书
《中国梦我的梦》小学生演讲稿
2014/08/20 职场文书
幼儿园教师个人总结
2015/02/05 职场文书
干部考核工作总结2015
2015/07/24 职场文书
《七律·长征》教学反思
2016/02/16 职场文书
html5表单的required属性使用
2021/07/07 HTML / CSS