react8 组件之间的通信
<body>
<!-- React 真实 DOM 将会插入到这里 -->
<div id="example"></div>
<!-- 引入 React -->
<script src="src/libs/react.js"></script>
<!-- 引入 JSX 语法格式转换器 -->
<script src="src/libs/JSXTransformer.js"></script>
<script src="src/libs/jquery.js"></script>
<!-- 注意：script 需要注明 type 为 text/jsx 以指定这是一个 JSX 语法格式 -->
<script type="text/jsx">
var Parent = React.createClass({
handleClick : function () {
React.findDOMNode(this.refs.myTestInput).focus();
},
render : function () {
return (
<div onClick={this.handleClick} className="aaa">
<input type="text" ref="myTestInput" />
<Child name={this.props.name}></Child>
</div>
)
}
})
var Child = React.createClass({
render: function () {
return (
<div>{this.props.name}</div>
)
}
})
React.render(
<Parent name="11111111111" />,
document.getElementById('example')
)
</script>
</body>
组件之间的通信
先创建一个父类组件Parent，它内部调用一个叫做Child的子组件，并将接收到的外部参数name传递给子组件Child。
再创建一个子类组件Child
然后通过React.render方法将组件渲染到页面上
- 子组件调用父组件的方法。从上面的例子可以看出，子组件要拿到父组件的属性，需要通过this.props方法。所以，如果子组件想要调用父组件的方法，只需要父组件把要被调用的方法以属性的方式放在子组件上，子组件内部便可通过"this.props.被调用的方法"这样的方式拿到name属性的。然后，每次父组件修改了传入的name属性，子组件便会得到通知，然后自动获取新的name属性
- 父组件调用子组件的方法。子组件调用父组件是通过prop属性，而反过来，父组件调用子组件通过的就是 ref 属性。子组件被设置了ref属性之后，父组件便可以通过this.ref.xxx来获取到子组件了，其中xx为子组件的ref值。
react8 组件之间的通信的更多相关文章
- 使用reflux进行react组件之间的通信
前言 组件之间为什么要通信?因为有依赖. 那么,作为React组件,怎么通信? React官网说, 进行 父-子 通信,可以直接pass props. 进行 子-父 通信,往父组件传给子组件的函数注入 ...
- react native 之子组件和父组件之间的通信
react native开发中,为了封装性经常需要自定义组件,这样就会出现父组件和子组件,那么怎么在父组件和子组件之间相互通信呢,也就是怎么在各自界面push和pop.传值. 父组件传递给子组件: 父 ...
- js组件之间的通信
应用场景: 1.在刷微博的时候,滑到某个头像上,会出现一张usercard(用户名片), 微博列表区有这个usercard, 推荐列表也有这个usercard,评论区也有. 2.在网上购物时,购物车安 ...
- Intent实现Activity组件之间的通信
今天讲解的是使用Intent实现Activity组件之间的通信. 一. 使用Intent显式启动Activity,Activity1àActivity2 1. ...
- 使用Broadcast实现android组件之间的通信 分类： android 学习笔记 2015-07-09 14:16 110人阅读 评论(0) 收藏
android组件之间的通信有多种实现方式,Broadcast就是其中一种.在activity和fragment之间的通信,broadcast用的更多本文以一个activity为例. 效果如图: 布局 ...
- vue 基础-->进阶 教程(3):组件嵌套、组件之间的通信、路由机制
前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零开始,教给大家vue的基础.高级操作.组件 ...
- ionic2+Angular 依赖注入之Subject ——使用Subject来实现组件之间的通信
在Angular+ionic2 开发过程中,我们不难发现,页面之间跳转之后返回时是不会刷新数据的. 场景一:当前页面需要登录之后才能获取数据--去登录,登录成功之后返回--页面需要手动刷新才能获取到数 ...
- 使用Broadcast实现android组件之间的通信
android组件之间的通信有多种实现方式,Broadcast就是其中一种.在activity和fragment之间的通信,broadcast用的更多本文以一个activity为例. 效果如图: 布局 ...
- vue工程利用pubsub-js实现兄弟组件之间的通信
前言 项目是基于vue-cli创建的,不会搭建vue开发环境的同学可以百度,这里不再赘述. 步骤流程 vue项目搭建完成之后的文件图如下: 我的上一篇博客已经详细叙述vue工程中各个文件的作用,不清楚 ...
随机推荐
- shell数组操作
1.数组定义,shell使用一对括号表示数组,数组元素间用"空格"分隔 # 空数组arr1 arr1=() # 数组arr2,成员分别是1, 2, 3, 4, 5, 6 arr2= ...
- 关于netty
现在我们一般使用应用程序或者链接库相互进行通信.例如,我们经常通过一个使用http协议的客户端链接库,从网站服务器中获得信息,并且通过网站服务,调用一些远程程序. 然而,一些通用协议或者它们的实现方式 ...
- hdu 5543 Pick The Sticks（动态规划）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5543 题意:给你一根长为m的长木板和一些小木棒,每一根小木棒有它的长度和价值,这些小木棒要放在长木板上 ...
- Learning ROS for Robotics Programming - Second Edition（《学习ROS机器人编程-第二版》）
Learning ROS for Robotics Programming - Second Edition <学习ROS机器人编程-第二版> ----Your one-stop guid ...
- 关于Android的背景色配色小结
三基色原理:三基色是指红,绿,蓝三色,人眼对红.绿.蓝最为敏感,大多数的颜色可以通过红.绿.蓝三色按照不同的比例合成产生.同样绝大多数单色光也可以分解成红绿蓝三种色光.这是色度学的最基本原理,即三基色 ...
- Kylin查询性能低下原因分析
在处理指数行情数据时(IDXD),我遇到一个KYLIN性能查询低下的问题,非常奇怪.经过一番研究发现了其中的原因并顺利解决: 症状: select count(*) from sensitop.idx ...
- MQTT V3.1----flow
该文章转自:聂永的博客(http://www.blogjava.net/yongboy/archive/2014/02/15/409893.html) 网络故障 在任何网络环境下,都会出现一方连接失败 ...
- 我的ORM之示例项目
我的ORM索引 示例项目 code.taobao.org/svn/MyMvcApp/ 1. 编译 MyTool ,DbEnt, WebApp, 安装JRE. 2. 配置 Web.config 数据库字 ...
- PowerShell笔记
教程: http://www.pstips.net/powershell-online-tutorials/ http://www.3fwork.com/a113/ 1. 查看成员 $MyInvoca ...
- Spring1：Spring简介、环境搭建、源码下载及导入MyEclipse
框架学习前言 这个模块是面向Spring的,Spring的学习我是这么想的: 1.简单介绍Spring,主要是从网上借鉴一些重点 2.尽量说明清楚Spring的使用方法以及细节点 3.尽量以自己的理解 ...