React组件间的通信
1、子组件调用父组件，采用props的方式进行调用和赋值，在父组件中设置相关属性值或者方法，子组件通过props的方式进行属性赋值或者方法调用；
2、父组件调用子组件，采用refs的方式进行调用，需要父组件在调用子组件的时候，添加ref属性，并进行唯一命名，在父组件中即可调用；
子组件调用父组件
- 创建一个简单组件ButtonComment，调用此组件是需传递参数buttonName，并创建初始化方法getInitialState及点击事件sendSword ：
var ButtonComment = React.createClass({
getInitialState: function () {
return {count:0};
},
//点击发宝刀。。。
sendSword: function () {
var newCount = this.state.count + 1;
this.setState({ count:newCount });
//通过props调用父组件的方法
this.props.getSwordCount(newCount );
},
render: function () {
return (
<button onClick={this.sendSword}>{this.props.buttonName}</button>
);
}
});
点击按钮，将会调用sendWord方法，更改count的状态，并调用父组件的方法getSwordCount，这时将会重新渲染页面，如果不想重新渲染请重写方法shouldComponentUpdate: function (nextProps,nextState){}并返回false即可。
- 创建一个父组件ImDaddyComponent，并将属性buttonName及方法getSwordCount传递给子组件ButtonComment：
var ImDaddyComponent = React.createClass({
getInitialState: function () {
return {sendCount:0};
},
getSwordCount: function (newCount) {
this.setState({sendCount:newCount});
},
render: function () {
return (
<div>
<ButtonComment getSwordCount={this.getSwordCount} buttonName="儿子送宝刀"/>
<p>
父子俩共送{this.state.sendCount}把宝刀！！！
</p>
</div>
);
}
});
- 进行页面的渲染，点击”儿子送宝刀”按钮时，将会计算送宝刀数量，并通过this.props.getSwordCount(newCount );传递给父组件，更改state属性值。
React.render(
<ImDaddyComponent />,
document.getElementById('index-0331-0011')
);
以上就完成了子组件调用父组件的属性及方法。
父组件调用子组件
- 要调用子组件的方法或者属性，需要在调用子组件的时候定义ref属性，且唯一，更新ImDaddyComponent 如下：
var ImDaddyComponent = React.createClass({
getInitialState: function () {
return {sendCount:0};
},
//通过refs方式调用子组件的方法sendSword
sendSword: function () {
this.refs.getSwordButton.sendSword();
},
getSwordCount: function () {
//通过refs方式调用子组件的属性count
this.setState({sendCount:this.refs.getSwordButton.state.count + 1});
},
render: function () {
return (
<div>
//此处需要定义ref属性，且值唯一
<ButtonComment ref="getSwordButton" getSwordCount={this.getSwordCount} buttonName="儿子送宝刀"/>
<button onClick={this.sendSword}>通过老爸送宝刀</button>
<p>
父子俩共送{this.state.sendCount}把宝刀！！！
</p>
</div>
);
}
});
以上，就完成父组件调用子组件。
完整代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../../dist/react/react.js"></script>
<script src="../../dist/react/JSXTransformer.js"></script>
<script src="../../dist/jquery/jquery.min.js"></script>
<!--如下的这种引用方式是不正确的，必须使用上面的引用方式-->
<!--<script src="../../dist/react/JSXTransformer.js"/>-->
</head>
<body> <div id="index-0331-0011"></div>
<script type="text/jsx">
var ButtonComment = React.createClass({
getInitialState: function () {
return {count:0};
}, sendSword: function () {
var newCount = this.state.count + 1;
this.setState({count:this.state.count + 1});
this.props.getSwordCount();
}, render: function () {
return (
<button onClick={this.sendSword}>{this.props.buttonName}</button>
);
}
}); var ImDaddyComponent = React.createClass({
getInitialState: function () {
return {sendCount:0};
},
sendSword: function () {
this.refs.getSwordButton.sendSword();
},
getSwordCount: function () {
this.setState({sendCount:this.refs.getSwordButton.state.count + 1});
},
render: function () {
return (
<div>
<ButtonComment ref="getSwordButton" getSwordCount={this.getSwordCount} buttonName="儿子送宝刀"/>
<button onClick={this.sendSword}>通过老爸送宝刀</button>
<p>
父子俩共送{this.state.sendCount}把宝刀！！！
</p>
</div>
);
}
}); React.render(
<ImDaddyComponent />,
document.getElementById('index-0331-0011')
);
</script>
</body>
</html>
React组件间的通信的更多相关文章
- React 组件间通信介绍
React 组件间通信方式简介 React 组件间通信主要分为以下四种情况: 父组件向子组件通信 子组件向父组件通信 跨级组件之间通信 非嵌套组件间通信 下面对这四种情况分别进行介绍: 父组件向子 ...
- vue 和 react 组件间通信方法对比
vue 和 react 组件间通信方法对比: 通信路径 vue的方法 react的方法 父组件 => 子组件 props(推荐).slot(推荐).this.$refs.this.$childr ...
- React中父子组件间的通信问题
1.https://blog.csdn.net/sinat_17775997/article/details/59103173 (React中父子组件间的通信问题)
- 使用reflux进行react组件之间的通信
前言 组件之间为什么要通信?因为有依赖. 那么,作为React组件,怎么通信? React官网说, 进行 父-子 通信,可以直接pass props. 进行 子-父 通信,往父组件传给子组件的函数注入 ...
- 第四节：Vue表单标签和组件的基本用法，父子组件间的通信
vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...
- ZeroMQ(java)之I/O线程的实现与组件间的通信
算是开始读ZeroMQ(java)的代码实现了吧,现在有了一个大体的了解,看起来实现是比较的干净的,抽象什么的不算复杂... 这里先来看看它的I/O线程的实现吧,顺带看看是如何实现组件的通信的.... ...
- vuejs单一事件管理组件间的通信
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- React 组件间通讯
React 组件间通讯 说 React 组件间通讯之前,我们先来讨论一下 React 组件究竟有多少种层级间的关系.假设我们开发的项目是一个纯 React 的项目,那我们项目应该有如下类似的关系: 父 ...
- Vue2不使用Vuex如何实现兄弟组件间的通信
在一些正规的大型项目的企业级开发过程中我们一般会引入Vuex来对Vue所有组件进行状态管理,可以轻松实现各组件间的通信.但是有时候做做自己的小项目,没有必要使用Vuex时,如何简单的实现组件间的通信? ...
随机推荐
- appium---第四个脚本，进入app，有权限弹窗的方法
1.以淘宝为例:进入首页,会弹出好几个权限弹窗 无法使用id定位 用xpath定位
- 027 ResourceBundle.getBundle方法
在程序中遇到这个,感觉会比较重要,就学习一番. 一:静态读取配置文件的Demo 1.新建工程 2.新建properties 3.新建Java的demo程序 注意不要写properties. packa ...
- HDU 2242 考研路茫茫—空调教室 (边双连通+树形DP)
<题目链接> 题目大意: 给定一个连通图,每个点有点权,现在需要删除一条边,使得整张图分成两个连通块,问你删除这条边后,两联通块点权值和差值最小是多少. 解题分析: 删除一条边,使原连通图 ...
- hdu 3183 A Magic Lamp 【RMQ】
<题目链接> <转载于 >>> > 题目大意: 给出一个长度不超过1000位的数,求删去m位数字以后形成的最小的数字是多少. 解题分析: 分析:我们可以把题 ...
- Spring Boot 项目实战（六）集成 Apollo
一.前言 上篇介绍了 Spring Boot 集成 Dubbo,使我们的系统打下了分布式的基础.随着程序功能的日益复杂,程序的配置日益增多:各种功能开关.参数配置.服务器地址等:对程序配置的期望值也越 ...
- 学习笔记——在vue中如何配置Jest（一）
最近在搞Jest单元测试,如何在vue中安装和使用jest我就不说了,前一篇文章简单的说了一下在使用jest时遇到的一些问题,但是我觉得并没有真正的解决的很好.后面会在学习过程中更新前面的那篇文章,加 ...
- JAVAScript：前端模块化开发
目录 一:前端模块化概要 1.1.模块化概要 1.2.函数封装 1.3.对象封装 1.4.立即执行函数表达式(IIFE) 1.5.模块化规范 1.5.1.CommonJS 1.5.2.AMD((Asy ...
- linux 学习笔记 查看文件篇
1 diff 比较两个文件 #diff -y test.txt test.txt 输出源文件和目标文件的全部.分左右两栏. aaaa aaaa bbb | b ccc < > ddd 注 ...
- Vue项目History模式404问题解决
本文主要解决Vue项目使用History模式发布到服务器Nginx上刷新页面404问题.(由于每个项目的情况都不尽相同,本方案已经完美解决本在所使用项目,具体情况可能还需要修改.) 1.项目背景分析 ...
- Java -- 内部类（一）
什么是内部类 将一个类的定义放在另一个类的定义内部,这就是内部类.在Java中内部类主要分为成员内部类.局部内部类.匿名内部类.静态内部类.举个栗子: public class A { public ...