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 动态创建VML的方法
Oct 14 Javascript
jQuery数组处理方法汇总
Jun 20 Javascript
jquery 如何动态添加、删除class样式方法介绍
Nov 07 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
Mar 21 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
Jul 27 Javascript
jQuery获取多种input值的简单实现方法
Jun 20 Javascript
实例详解display:none与visible:hidden的区别
Mar 30 Javascript
bmob js-sdk 在vue中的使用教程
Jan 21 Javascript
详解ECMAScript typeof用法
Jul 25 Javascript
vue实现element-ui对话框可拖拽功能
Aug 17 Javascript
JavaScript创建对象的四种常用模式实例分析
Jan 11 Javascript
JS操作字符串转数字的常见方法示例
Oct 29 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
Protoss热键控制
2020/03/14 星际争霸
跟我学小偷程序之成功偷取首页(第三天)
2006/10/09 PHP
聊天室php&amp;mysql(一)
2006/10/09 PHP
PHP数据流应用的一个简单实例
2012/09/14 PHP
提高PHP编程效率的方法
2013/11/07 PHP
destoon实现底部添加你是第几位访问者的方法
2014/07/15 PHP
PHP判断数据库中的记录是否存在的方法
2014/11/14 PHP
php实现图片压缩处理
2020/09/09 PHP
关于文本框的一些限制控制总结~~
2010/04/15 Javascript
再谈javascript图片预加载技术(详细演示)
2011/03/12 Javascript
JavaScript中合并数组的N种方法
2014/09/16 Javascript
node.js中的fs.rename方法使用说明
2014/12/16 Javascript
JavaScript中的操作符==与===介绍
2014/12/31 Javascript
多种jQuery绑定事件的实现方式
2016/06/13 Javascript
Spring MVC中Ajax实现二级联动的简单实例
2016/07/06 Javascript
jQuery动态添加与删除tr行实例代码
2016/10/18 Javascript
JS实现旋转木马式图片轮播效果
2017/01/18 Javascript
JS实现颜色动态淡化效果
2017/03/06 Javascript
使用AngularJS2中的指令实现按钮的切换效果
2017/03/27 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
2018/08/10 Javascript
extract-text-webpack-plugin用法详解
2019/02/14 Javascript
Node.js中package.json中库的版本号(~和^)
2019/04/02 Javascript
基于JavaScript获取base64图片大小
2019/10/18 Javascript
Python之Scrapy爬虫框架安装及使用详解
2017/11/16 Python
利用scrapy将爬到的数据保存到mysql(防止重复)
2018/03/31 Python
关于Python3 类方法、静态方法新解
2019/08/30 Python
python多进程间通信代码实例
2019/09/30 Python
基于Html5实现的react拖拽排序组件示例
2018/08/13 HTML / CSS
餐饮管理自我介绍信
2014/01/15 职场文书
八达岭长城导游词
2015/01/30 职场文书
美术教师个人工作总结
2015/02/06 职场文书
员工拾金不昧表扬稿
2015/05/05 职场文书
离婚纠纷代理词
2015/05/23 职场文书
2016简单的租房合同范本
2016/03/18 职场文书
python实现socket简单通信的示例代码
2021/04/13 Python
Java存储没有重复元素的数组
2022/04/29 Java/Android