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 相关文章推荐
给网站上的广告“加速”显示的方法
Apr 08 Javascript
js 禁用浏览器的后退功能的简单方法
Dec 10 Javascript
JavaScript OOP面向对象介绍
Dec 02 Javascript
javascript的offset、client、scroll使用方法详解
Dec 25 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
Jan 23 Javascript
js图片跟随鼠标移动代码
Nov 26 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
Mar 28 Javascript
全面了解JavaScript的数据类型转换
Jul 01 Javascript
浅谈vue项目打包优化策略
Sep 29 Javascript
layui动态加载多表头的实例
Sep 05 Javascript
2分钟实现一个Vue实时直播系统的示例代码
Jun 05 Javascript
在vue中获取wangeditor的html和text的操作
Oct 23 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/02/27 PHP
php中stdClass的用法分析
2015/02/27 PHP
PHP简单获取视频预览图的方法
2015/03/12 PHP
Codeigniter中集成smarty和adodb的方法
2016/03/04 PHP
PHP设计模式之工厂模式(Factory Pattern)的讲解
2019/03/21 PHP
PHP 实现缩略图
2021/03/09 PHP
去除链接虚线全面分析总结
2006/08/15 Javascript
jquery判断单个复选框是否被选中的代码
2009/09/03 Javascript
JavaScript入门之事件、cookie、定时等
2011/10/21 Javascript
js的toUpperCase方法用法实例
2015/01/27 Javascript
使用jquery给指定的table动态添加一行、删除一行
2016/10/13 Javascript
seajs学习之模块的依赖加载及模块API的导出
2016/10/20 Javascript
基于JS实现翻书效果的页面切换样式
2017/02/16 Javascript
Vue中计算属性computed的示例解读
2017/07/26 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
最实用的JS数组函数整理
2017/12/05 Javascript
vue-cli的工程模板与构建工具详解
2018/09/27 Javascript
JavaScript实现串行请求的示例代码
2020/09/14 Javascript
Vue使用Ref跨层级获取组件的步骤
2021/01/25 Vue.js
python使用range函数计算一组数和的方法
2015/05/07 Python
Python制作简单的网页爬虫
2015/11/22 Python
探究python中open函数的使用
2016/03/01 Python
在Linux命令行终端中使用python的简单方法(推荐)
2017/01/23 Python
Python3实现将本地JSON大数据文件写入MySQL数据库的方法
2018/06/13 Python
python编辑用户登入界面的实现代码
2018/07/16 Python
python: 判断tuple、list、dict是否为空的方法
2018/10/22 Python
Python3对称加密算法AES、DES3实例详解
2018/12/06 Python
Python 正则表达式匹配字符串中的http链接方法
2018/12/25 Python
python 基于opencv去除图片阴影
2021/01/26 Python
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
2019/10/15 HTML / CSS
CSS3中引入多种自定义字体font-face
2020/06/12 HTML / CSS
canvas 阴影和图形变换的示例代码
2018/01/02 HTML / CSS
Mio Skincare美国官网:身体紧致及孕期身体护理
2017/03/05 全球购物
司法工作人员群众路线对照检查材料思想汇报
2014/09/30 职场文书
公司周年庆典标语
2014/10/07 职场文书
感谢信
2019/04/11 职场文书