<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 组件之间的通信的更多相关文章

  1. 使用reflux进行react组件之间的通信

    前言 组件之间为什么要通信?因为有依赖. 那么,作为React组件,怎么通信? React官网说, 进行 父-子 通信,可以直接pass props. 进行 子-父 通信,往父组件传给子组件的函数注入 ...

  2. react native 之子组件和父组件之间的通信

    react native开发中,为了封装性经常需要自定义组件,这样就会出现父组件和子组件,那么怎么在父组件和子组件之间相互通信呢,也就是怎么在各自界面push和pop.传值. 父组件传递给子组件: 父 ...

  3. js组件之间的通信

    应用场景: 1.在刷微博的时候,滑到某个头像上,会出现一张usercard(用户名片), 微博列表区有这个usercard, 推荐列表也有这个usercard,评论区也有. 2.在网上购物时,购物车安 ...

  4. Intent实现Activity组件之间的通信

    今天讲解的是使用Intent实现Activity组件之间的通信. 一.         使用Intent显式启动Activity,Activity1àActivity2 1.             ...

  5. 使用Broadcast实现android组件之间的通信 分类： android 学习笔记 2015-07-09 14:16 110人阅读 评论(0) 收藏

    android组件之间的通信有多种实现方式,Broadcast就是其中一种.在activity和fragment之间的通信,broadcast用的更多本文以一个activity为例. 效果如图: 布局 ...

  6. vue 基础-->进阶 教程(3):组件嵌套、组件之间的通信、路由机制

    前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零开始,教给大家vue的基础.高级操作.组件 ...

  7. ionic2+Angular 依赖注入之Subject ——使用Subject来实现组件之间的通信

    在Angular+ionic2 开发过程中,我们不难发现,页面之间跳转之后返回时是不会刷新数据的. 场景一:当前页面需要登录之后才能获取数据--去登录,登录成功之后返回--页面需要手动刷新才能获取到数 ...

  8. 使用Broadcast实现android组件之间的通信

    android组件之间的通信有多种实现方式,Broadcast就是其中一种.在activity和fragment之间的通信,broadcast用的更多本文以一个activity为例. 效果如图: 布局 ...

  9. vue工程利用pubsub-js实现兄弟组件之间的通信

    前言 项目是基于vue-cli创建的,不会搭建vue开发环境的同学可以百度,这里不再赘述. 步骤流程 vue项目搭建完成之后的文件图如下: 我的上一篇博客已经详细叙述vue工程中各个文件的作用,不清楚 ...

随机推荐

  1. npm下载速度太慢

    因为墙的原因导致下载速度过慢,解决方式就是使用国内镜像 使用淘宝的镜像 npm config set registry="http://registry.npm.taobao.org/&qu ...

  2. 经验总结之Android framework开发

    本人在某做手机ROM的厂商工作近两年,虽然工作年限不长,但是对此类“工种”已有比较初步的认识,写下来供大家参考借鉴. framework的工作相对于其他比较成熟的软件开发类似,分为维护和需求开发. 需 ...

  3. MySQL的安装配置

    安装配置 MySQL1.官方下载 MySQL2.用 tar 解压.tar.bz 或.tar.gz3.解压后有三个目录,分别为 usr etc var4.进入 usr,进入 bin5.在主机上建个目录( ...

  4. Freemarker 内置函数 数字、字符串、日期格式化用法介绍

    在用FreeMarker过程中,感觉FreeMarker的字符串,日期,集合等处理能力还是很强大的,上网搜了一些资料,整理如下,以便能帮助大家更熟练的应用Freemarker完成项目开发. 一.Seq ...

  5. PYTHON学习之路_PYTHON基础（1）

    学习内容: 1.Python介绍 2.Python程序初接触和变量 3.Python用户交互 4.Python数据类型 5.Python循环if...(elif)...else 6.Python循环w ...

  6. 如何 在远程虚拟机 里 破解 最新版 SQL Prompt

    玩数据的人 经常 写写 SQL,SQL Prompt 是蛮好用的 辅助工具 ,现在 的 主流 破解工具 都是 需要  断开网路的 但是 现在 有些  开发环境 都是 在 云虚拟机 里,比如 客户方的. ...

  7. 插入排序-java

    排序-插入排序 基本思想:将待排序表看作左右两部分,其中左边为有序区,右边为无序区, 整个排序过程就是将右边无序区中的元素逐个插入到左边的有序区中,以构成新的有序区. 平均时间:O(n2) 最好情况: ...

  8. android wifi SWOL低功耗模式

    1 睡眠模式RX代码流程 ar_wal_rx_patch.c::patch_rx_process_recv_status//调用rx_ctxt->data_ind_handler -> d ...

  9. webuploader 断点续传

    webuploader 实现 断点续传webuploader是百度开发的上传文件前端控件.可支持html5和flash,因此对浏览器的兼容比较好.因为需要用到ie8,ie8不支持html5,所以必须支 ...

  10. C++之友元

    友元提供了不同类的成员函数之间.类的成员函数与一般函数之间进行数据共享的机制.通过友元,一个不同函数或另一个类中的成员函数可以访问类中的私有成员和保护成员.C++中的友元为封装隐藏这堵不透明的墙开了一 ...