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 的过程中,不可避免的需要组件间进行消息传递(通信),组件间通信大体有下面几种情况: 父组件向子组件通信 子组件向父组件通信 跨级组件之间通信 非嵌套组件间通信 下面依次说下这几种通 ...
随机推荐
- CSS 画三角形、圆
<div class="square"></div> <style> .square { height: 0px; width: 0px; bo ...
- css常用技巧集合
1 不想让按钮touch时有蓝色的边框或半透明灰色遮罩(根据系统而定) /*解决方式一*/ -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-use ...
- xxxxxxxxxxxxxx
一.Linux命令的分类 1.内部命令:属于Shell解释器的一部分 2.外部命令:独立于Shell解释器之外的程序 3.type命令,查看命令是外部命令还是内部命令: [root@www ~]# t ...
- Unity3D 正六边形,环状扩散,紧密分布,的程序
最近在做一个正六边形的游戏,被一开始的布局难倒了. 需求:中心有个正六边形,输入围绕中心扩散的环数,自动创建和摆放. 大概就是这样的吧,我觉得这个非常轻松的就可以搞定了.啊~~~~~啊~~~ 五环~~ ...
- iOS获取设备型号和App版本号等信息(OC+Swift)
iOS获取设备型号和App版本号等信息(OC+Swift) 字数1687 阅读382 评论3 喜欢10 好久没有写过博客了,因为中间工作比较忙,然后有些个人事情所以耽误了.但是之前写的博客还一直有人来 ...
- 交作业啊,python爬取58的页面
第一次写博文,好紧张啊,写这么烂怎么给别人看啊先做下总结: 刚开始学习python,自我感觉python写起来确实很方便,各种库,各种语法糖,不过刚接触,一下子记不下来这么多东西,总感觉乱乱的,用的多 ...
- 二、AspNet Core添加EF的基本方法(简略版):
_/\__ ---==/ \\ |. \|\ | ) \\\ \_/ | //|\\ / \\\/\\ 1.在Project.json的dependencies选项中添加以下引用: "Mic ...
- macOS 中的 Rootless 机制
一.前因 苹果从 OS X El Capitan 10.11 系统开始使用了 Rootless 机制,可以将该机制理解为一个更高等级的系统的内核保护措施,系统默认将会锁定 /system./sbin. ...
- javascript原生方法实现extend
var extend = (function () { for(var p in {toString:null}){ //检查当前浏览器是否支持forin循环去遍历出一个不可枚举的属性,比如toStr ...
- 记录——时间轮定时器(lua 实现)
很长一段时间里,我错误的认识了定时器.无意中,我发现了“时间轮”这个名词,让我对定时器有了新的看法. 我错误的认为,定时器只需要一个 tick 队列,按指定的时间周期遍历队列,检查 tick 倒计时满 ...