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 attachEvent和addEventListener使用方法
Mar 19 Javascript
遍历jquery对象的代码分享
Nov 02 Javascript
javascript将数组插入到另一个数组中的代码
Jan 10 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
Jun 21 Javascript
javascript的回调函数应用示例
Feb 20 Javascript
ajax提交表单实现网页无刷新注册示例
May 08 Javascript
javascript实现数组去重的多种方法
Mar 14 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
Jan 01 Javascript
vue一个页面实现音乐播放器的示例
Feb 06 Javascript
vue-cli 首屏加载优化问题
Nov 06 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
Nov 08 Javascript
vue 组件间的通信之子组件向父组件传值的方式
Jul 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
如何在PHP程序中防止盗链
2008/04/09 PHP
for循环连续求和、九九乘法表代码
2012/02/20 PHP
基于jquery的3d效果实现代码
2011/03/23 Javascript
JavaScript XML和string相互转化实现代码
2011/07/04 Javascript
Nodejs中 npm常用命令详解
2016/07/04 NodeJs
AngularJS包括详解及示例代码
2016/08/17 Javascript
Angular2使用Angular CLI快速搭建工程(一)
2017/05/21 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
2017/09/07 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
2017/12/21 Javascript
Vue路由切换时的左滑和右滑效果示例
2018/05/29 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
2018/10/19 Javascript
JS实现的简单tab切换功能完整示例
2019/06/20 Javascript
vue实现信息管理系统
2020/05/30 Javascript
element-ui封装一个Table模板组件的示例
2021/01/04 Javascript
Python专用方法与迭代机制实例分析
2014/09/15 Python
Php多进程实现代码
2018/05/07 Python
python使用turtle库与random库绘制雪花
2018/06/22 Python
浅谈dataframe中更改列属性的方法
2018/07/10 Python
使用python进行广告点击率的预测的实现
2019/07/04 Python
在Python中使用MySQL--PyMySQL的基本使用方法
2019/11/19 Python
python 利用已有Ner模型进行数据清洗合并代码
2019/12/24 Python
解锁canvas导出图片跨域的N种姿势小结
2019/01/24 HTML / CSS
Perricone MD裴礼康美国官网:抗衰老护肤品
2016/09/26 全球购物
印度尼西亚电子产品购物网站:Kliknklik
2018/06/05 全球购物
JoJo Maman Bébé爱尔兰官网:英国最受欢迎的精品母婴品牌
2020/12/20 全球购物
启动一个线程是用run()还是start()
2016/12/25 面试题
体育专业个人求职信范文
2013/12/27 职场文书
人力资源部培训专员岗位职责
2014/01/02 职场文书
售后服务承诺书
2014/03/26 职场文书
优秀毕业生就业推荐信
2014/05/22 职场文书
法律进社区活动总结
2015/05/07 职场文书
地道战观后感400字
2015/06/04 职场文书
MySQL 角色(role)功能介绍
2021/04/24 MySQL
Python入门之基础语法详解
2021/05/11 Python
关于python类SortedList详解
2021/09/04 Python
javascript实现计算器功能详解流程
2021/11/01 Javascript