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时,如何简单的实现组件间的通信? ...
随机推荐
- 向Spark集群提交任务
1.启动spark集群. 启动Hadoop集群 cd /usr/local/hadoop/ sbin/start-all.sh 启动Spark的Master节点和所有slaves节点 cd /usr/ ...
- 函数防抖 debounce
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- PHP生成二维码,PHPQRCode
声明一个方法,直接调用即可 <?php /** * 功能:生成二维码 * @param string $qr_data 手机扫描后要跳转的网址 * @param string $qr_level ...
- netty04（重点来了、指定某个客户端发信息或者群发）小声嘀咕~~我也是从零开始学得、、、想学习netty的又不知道怎么下手的童鞋们~~
还是和上几篇一样,先给出前面笔记的连接,有没看的可以去看看再来! netty01 . netty02 .netty03 看到这里.你基本上可以使用netty接受信息和根据对应的信息返回信息了 接 ...
- 15行Python 仿百度搜索引擎
开发工具:PyCharm 开发环境:python3.6 + flask + requests 开发流程: 1. 启动一个web服务 from flask import Flask app = Flas ...
- Java 之 Web前端（二）
1.Cookie (客户端所拥有) a.含义:服务器给浏览器的甜点 b.语法: //创建Cookie Cookie cookie = new Cookie("name", &quo ...
- Sublime Text3配置Lua运行环境
Sublime Text3配置Lua运行环境 前言 要问现在哪个编译器最能扛得住潮流,要数Sublime Text3了,由于它的轻量,插件丰富,美观,造就了一大批粉丝(本菜鸡也是哦) 在以前的工作中使 ...
- POJ 3237 Tree 【树链剖分】+【线段树】
<题目链接> 题目大意: 给定一棵树,该树带有边权,现在对该树进行三种操作: 一:改变指定编号边的边权: 二:对树上指定路径的边权全部取反: 三:查询树上指定路径的最大边权值. 解题分析: ...
- linux 学习笔记四
文件权限管理篇章 chown -R mysql. /usr/local 把 /usr/local/以及以下的所有文件和子目录属主改为 mysql ls -al * 用这条命令查询 chgrp c ...
- react编码规范
1.每个文件只写一个组件,但是多个无状态组件可以放在单个文件中: 2.有内部状态,方法或要对外暴露ref的组件,用类式组件: 3.无内部状态,方法或无需对外暴露ref的组件,用函数式组件: 4.有内部 ...