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时,如何简单的实现组件间的通信? ...
随机推荐
- net core体系-API-1Ocelot-（3）简单项目实战
首先,让我们简单了解下什么是API网关? API网关是一个服务器,是系统的唯一入口.从面向对象设计的角度看,它与外观模式类似.API网关封装了系统内部架构,为每个客户端提供一个定制的API.它可能还具 ...
- Codeforces 830C Bamboo Partition 其他
原文链接https://www.cnblogs.com/zhouzhendong/p/CF830C.html 题解 把问题转化成求最大的 $d$ ,满足$$\sum_{1\leq i \leq n}( ...
- EditPlus文本库编辑说明
EditPlus3 “编辑”命令(素材文本组合框弹出菜单)使用此命令载入当前的素材文本库文件(扩展名为“.CTL”)到编辑器中并直接编辑它.素材文本库文件必须按预定义语法编写.该语法非常简单.最快的方 ...
- 老虎ji 剪枝模拟
Problem Description “在赌场里,基本原则就是让他们玩下去以及让他们再来玩.他们玩得越久,他们会输的越多,最后,我们会得到一切.”(摘自1995年的电影Casino) 你正在一家赌场 ...
- IDEA控制台问题：java lang OutOfMemoryError：PermGen space
PermGen space的全称是Permanent Generation space,是指内存的永久保存区域. OutOfMemoryError: PermGen space从表面上看就是内存溢出, ...
- 线段树-hdu3397
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3397 题目描述: 题目大意:给我们一串二进制串,需要我们对其进行以下操作: 1.输入0,a,b,将a, ...
- POJ 2001 Shortest Prefixes 【Trie树】
<题目链接> 题目大意: 找出能唯一标示一个字符串的最短前缀,如果找不出,就输出该字符串. 解题分析: Trie树的简单应用,对于每个单词的插入,都在相应字符对应的节点 num 值+1 , ...
- provisional headers are shown 知多少
前言 请求里面provisional headers are shown(显示临时报头) 出现的情况很多,但原因是多样的. 如果你去直接匹配关键字搜索,得到的结果可能与你自己的情况大相径庭. 网上大部 ...
- Jenkins环境搭建（1）-下载与安装
Jenkins简介 Jenkins是一个功能强大的应用程序,允许持续集成和持续交付项目,它是一个免费的源代码,可以处理任何类型的构建或持续集成.集成Jenkins可以用于一些测试和部署技术. Jenk ...
- Redis自学笔记:4.2进阶-过期时间
4.2过期时间 **4.2.1命令介绍* 在redis中使用 expire 命令设置一个键的过期时间后redis会自动删除它. expire key seconds (seconds单位是秒,必须是整 ...