React之组件通信
组件通信无外乎,下面这三种父子组件,子父组件,平行组件(也叫兄弟组件)间的数据传输。下面我们来分别说一下:
父子组件:
var Demo=React.createClass({
getInitialState:function(){
return{
res:''
}
},
tap:function(e){
var str=e.target.value;
this.setState({res:str})
},
render:function(){
return(
<div>
<h1>父组件</h1>
<input type="text" onChange={this.tap}/>
<Child name={this.state.res}/>
</div>
)
}
})
var Child=React.createClass({
render:function(){
console.log(this.props)
return(
<div>
<h1>子组件</h1>
<p>{this.props.name}</p>
</div>
)
}
})
ReactDOM.render(<Demo/>,document.getElementById('out'))
这里我们通过设置默认状态,添加onchange事件,并把状态以默认属性的形式给子组件,然后通过this.props来获取。
说完了父子组件,那么子组件如何传递到父组件呢?
<script type="text/babel">
var Demo=React.createClass({
getInitialState:function(){
return{
res:''
}
},
render:function(){
var _this=this;
return(
<div>
<h1>父组件</h1>
<p>{this.state.res}</p>
<Child name={function(s){
_this.setState({res:s})
}}/>
</div>
)
}
})
var Child=React.createClass({
tap:function(e){
var str=e.target.value;
console.log(str)
// this.props.name==function
// this.props.name(a)==function(s)
// a==s
this.props.name(str)
// str==s
},
render:function(){
console.log(this.props)
return(
<div>
<h1>子组件</h1>
<input type="text" onChange={this.tap}/>
</div>
)
}
})
ReactDOM.render(<Demo/>,document.getElementById('out'))
</script>
【子组件】控制自己的 state 然后告诉【父组件】的点击状态,然后在【父组件】中展示出来。
----------------------------------------------------------------------------------------------------------------------------------------------------
同级组件间的通讯复杂点,不过这里可以说点思路,假如这两个组件拥有相同的父组件可以将父组件作为桥梁,一个组件先传递给父组件,然后父组件再传递给兄弟组件。
另外还可以使用观察着模式,还有redux。这两个我还没完全理解,日后再说。
React之组件通信的更多相关文章
- react的组件通信
react的组件通信 1.父组件传子组件 import React, {Component} from 'react'class Father extends Component{ render() ...
- React中组件通信的几种方式
https://segmentfault.com/a/1190000012361461 需要组件之进行通信的几种情况 父组件向子组件通信 子组件向父组件通信 跨级组件通信 没有嵌套关系组件之间的通信 ...
- 5.React中组件通信问题
1.父组件传递值给子组件 想必这种大家都是知道的吧!都想到了用我们react中的props,那么我在这简单的写了小demo,请看父组件 class Parent extends Component{ ...
- react 父子组件通信
import React from 'react'; import B from './B'; class A extends React.Component{ state = { msg:'我来自于 ...
- 【JAVASCRIPT】React学习- 数据流(组件通信)
摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 一 组件通信如何实现 父子组件之间不存在继承关系 1.1 父=>子通信 父组件可以通过 this.refs.xx ...
- react初探(二)之父子组件通信、封装公共组件
一.前言 在组件方面react和Vue一样的,核心思想玩的就是组件,下面举两个组件常用的情景. 场景一:假如我们现在有一个页面包含表格以及多个弹框,这种时候如果将这个页面的业务代码写在一个组件中,那么 ...
- React子组件和父组件通信
React子组件和父组件通信包括以下几个方面: 子组件获取父组件属性:props或者state 子组件调用父组件的方法 父组件获取子组件的属性:props或者state 父组件调用子组件的方法 我们从 ...
- 三大前端框架(react、vue、angular2+)父子组件通信总结
公司业务需要,react.vue.angular都有接触[\无奈脸].虽然说可以拓展知识广度,但是在深度上很让人头疼.最近没事的时候回忆各框架父子组件通信,发现很模糊,于是乎稍微做了一下功课,记录于此 ...
- [转] React 中组件间通信的几种方式
在使用 React 的过程中,不可避免的需要组件间进行消息传递(通信),组件间通信大体有下面几种情况: 父组件向子组件通信 子组件向父组件通信 跨级组件之间通信 非嵌套组件间通信 下面依次说下这几种通 ...
随机推荐
- 关于阿里图标库Iconfont生成图标的三种使用方式(fontclass/unicode/symbol)
1.附阿里图标库链接:http://www.iconfont.cn/ 2.登录阿里图标库以后,搜索我们需要的图标,将其加入购物车,如图3.将我们需要的图标全部挑选完毕以后,点击购物车图标4.这时候右侧 ...
- struts2自定义日期类型转换器
在java web表单中提交的数据难免会有日期类型,struts2支持的日期类型是yyyy-MM-dd,如果是其他格式,就需要自己进行转换.比如yy-MM-dd 要完成自己定义的转换需要完成. 主要的 ...
- 【模板】Dijkstra的heap优化
为了将最小费用最大流的spfa优化,决定将spfa换成heap优化的Dijkstra.(dijkstra不能处理负边权) 所以还得现学... 白点表示已经确定最短路径的点. 蓝点表示还未确定最短路径的 ...
- How to trace the Geolocation of network traffic
A case about suspicious malware App. A forensic examiner capatured some pcap files and he'd to know ...
- Java实现Android,iOS设备实时监控
Java实现Android设备实时监控 设计思路: 第一,启动一个实时截图线程,负责实时截取Android设备屏幕,保存到本地路径. 第二,在JSP页面,定义一个img对象,实时更换img对象的src ...
- nodejs + nginx + ECS阿里云服务器环境设置
nodejs + nginx + ECS阿里云服务器环境设置 部署 nodejs ECS 基于 CentOS7.2 详细步骤:click 部署 nginx 安装 添加Nginx软件库: [root@l ...
- node.js系列(模块):request模块实现与php的通讯
app.js: var express = require('express'); var request = require('request'); var app = express(); /*r ...
- 输入一个数字n 如果n为偶数则除以2,若为奇数则加1或者减1,直到n为1,求最少次数 写出一个函数
题目: 输入一个数字n 如果n为偶数则除以2,若为奇数则加1或者减1,直到n为1,求最少次数 写出一个函数 首先,这道题肯定可以用动态规划来解, n为整数时,n的解为 n/2 的解加1 n为奇数时 ...
- java 内存管理 —— 《Hotspot内存管理白皮书》
说明 要学习Java或者任意一门技术,我觉得最好的是从官网的资料开始学习.官网所给出的资料总是最权威最知道来龙去脉的.而Java中间,垃圾回收与内存管理是Java中非常重要的一部分.<Hot ...
- 腾讯云无法绑定公网IP问题解释与解决方案。
http://blog.csdn.net/chenggong2dm/article/details/51475222 解释:公网IP并不直接配置在服务器上,而是在服务器外部的路由上,通过某种映射连接. ...