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时,如何简单的实现组件间的通信? ...
随机推荐
- Codeforces 354B dp Game with Strings dp
Game with Strings 题意并不是在图上走,看了好久才看出来.. dp[ i ][ mask ]表示从 i 层开始走,起点有mask个, a的个数-b的个数的 最大值或者最小值. #in ...
- 亲和串 kmp
Problem Description 人随着岁数的增长是越大越聪明还是越大越笨,这是一个值得全世界科学家思考的问题,同样的问题Eddy也一直在思考,因为他在很小的时候就知道亲和串如何判断了,但是发现 ...
- quratz启动流程
SchedulerFactory在创建quartzScheduler的过程中,将会读取配置参数,初始化各个组件. 1.启动流程图 2.ThreadPool 一般是使用SimpleThreadPool, ...
- 2017-2018-2 20165220『Java程序设计』课程 结对编程练习_四则运算
需求分析 题目要求 一个命令行程序实现: 自动生成小学四则运算题目(加.减.乘.除) 支持整数 支持多运算符(比如生成包含100个运算符的题目) 支持真分数 统计正确率 需求理解 输入:需要计算的式子 ...
- centos6.9安装mysql5.7.18
详细记录在CentOS 6.9上安装MySQL 5.7.18 过程,希望对大家有所帮助. 下载地址:https://dev.mysql.com/get/Downloads/MySQL-5.7/mysq ...
- 关于pycharm中安装第三方库时报错的解决办法（一）
记录自己的生活! 一.事发背景 在pycharm中直接安装第三方库时因为版本问题总是无法安装成功,事情不大,但是很重要. 二.经过 最开始我自己电脑上安装了Python3.6和Python2. ...
- cmd使用notepad++为打开方式打开文件
想放一个txt进入vstart中,但是又不想用系统自带的记事本打开,想在vstart中双击时使用notepad++打开. cmd命令如下: "D:\notepad++\notepad++.e ...
- springboot2 config_toolkit 并且设置全局获取数据GlobalUtil
本文只贴相关代码段,完整代码请移步至本人github,若是喜欢,可以star给予支持 作者:cnJun 博客专栏: https://www.cnblogs.com/cnJun/ 本文实现目标 重要的配 ...
- BZOJ.5249.[九省联考2018]iiidx(贪心 线段树)
BZOJ LOJ 洛谷 \(d_i\)不同就不用说了,建出树来\(DFS\)一遍. 对于\(d_i\)不同的情况: Solution 1: xxy tql! 考虑如何把这些数依次填到树里. 首先对于已 ...
- Android：ViewGroup和View的Touch事件
Android中ViewGroup和View中的Touch事件传递机制分析 关键字:GroupView:View:Touch事件 基础知识: onInterceptTouchEvent():在View ...