React组件之间的通信的实例代码


Posted in Javascript onJune 27, 2017

最近学习浅尝则止的学习了一下react.js这个UI的框架,react这个库给我的最大的感觉就是它能够完全的接管UI层,在要改变视图的东西的时候只需要改变其this.state中的状态。只要操作数据层的东西视图层就会发生变化,这一点我还是很喜欢的。可以摆脱对DOM的直接操作,毕竟直接来会比较复杂,本来应该是逻辑层js中混杂着各种css的字符串,对于我来说有点不爽(JSX中也混杂这标签,但我觉的不应该把它看作标签,看作语句会习惯一点)。

回到几天的重点,讲react组件之间的状态传递。

上代码:

1.定义两个子组件child-1和child-2

//child-1 子组件-1为输入框
  class Input extends React.Component{
   constructor(...args){
   super(...args);
   }
   render(){
    return <input type="text"/>
   }
  }
  //child-2  子组-2为显示框
  class Show extends React.Component{
   constructor(...args){
    super(...args);
   }
   render(){
    return <p></p>
   }

  }

2.定义父组件Parent并且将两个子组件插入到父组件中

class Parent extends React.Component{
   constructor(...args){
    super(...args);
   }
   render(){
    return(
     <div>
      <Input}/>
      <Show/>
     </div>
    );
   }
  }

现在的任务是在组件1总输入一些文字,同时在组件2中同时显示出来。

分析:要让组件2与组件1同步,就让组件1和2都去绑定父组件的状态。也就是说让两个组件受控。数据的走向是,组件1将自身的数据提升到父层,并且保存在父层的状态中。父层中的数据通过组件2中的props属性传递到组件2中,并在视图层进行绑定。

第一步先绑定<Show/>组件

//在父层中的constructor中定义状态为一个空的message,this.state = {message:''}
class Parent extends React.Component{
  constructor(...args){
   super(...args);
   this.state = {
    message:''
   }

然后在父组件中的<Show/>改为

<Show onShow={this.state.message}/>

接着来我们进入到<Show/>组件中,给其内容绑定这个穿件来的onShow属性。<Show/>组件变为

class Show extends React.Component{
  constructor(...args){
   super(...args);
  }
  render(){
   return <p>{this.props.onShow}</p>
  }

这样组件2显示层的数据已经绑定好了,接下来我们只要改变父亲层状态中的message的内容就可以使绑定的显示层的内容跟着一起变化

将输入层的状态(数据)提升到父亲组件中.下面是改写后的组件1

class Input extends React.Component{
  constructor(...args){
    super(...args);
  }
   //将输入的内容更新到自身组件的状态中,并且将改变后的状态作为参数传递给该组件的一个自定义属性onInp()
  fn(ev){ 
   this.props.onInp(ev.target.value);
  }
  render(){
   //用onInput(注意react中采用驼峰写法和原生的略有不同)绑定fn()函数
   return <input type="text" onInput={this.fn.bind(this)} value={this.props.content}/>
  }
 }

看到这里可能会有一个问题:onInp()和content没有啊?不要急,接着看

接着改写父组件中的输入层子组件1,

class Parent extends React.Component{
  constructor(...args){
   super(...args);
   this.state = {
    message:''
   };
  }
  //传进的text是其提升上来的状态,然后再更新父组件的状态
  fn(text){
   this.setState({
    message:text
   })
  }
  render(){
   return(
    <div>
      /*
       onInp就出现在这里,并绑定一个函数,
       并且有一个content将父组件的状态同步到子组件中
      */
     <Input onInp={this.fn.bind(this)} content={this.state.message}/> 
     <Show onShow={this.state.message}/>
    </div>
   );
  }
 }

写完的代码是这样的

// 父组
 class Parent extends React.Component{
  constructor(...args){
   super(...args);
   this.state = {
    message:''
   };
  }
  onInp(text){
   this.setState({
    message:text
   })
  }
  render(){
   return(
    <div>
     <Input onInp={this.onInp.bind(this)} content={this.state.message}/>
     <Show onShow={this.state.message}/>
    </div>
   );
  }
 }
 //child-1
 class Input extends React.Component{
  constructor(...args){
  super(...args);
  }
  fn(ev){
   this.props.onInp(ev.target.value);
  }
  render(){
   return <input type="text" onInput={this.fn.bind(this)} value={this.props.content}/>
  }
 }
 //child-2
 class Show extends React.Component{
  constructor(...args){
   super(...args);
  }
  render(){
   return <p>{this.props.onShow}</p>
  }

 }
 //最后渲染出
 ReactDOM.render(
  <Parent/>,
  document.getElementById('app')
 );

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
优秀js开源框架-jQuery使用手册(1)
Mar 10 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
Mar 15 Javascript
jquery修改属性值实例代码(设置属性值)
Jan 06 Javascript
javascript获取web应用根目录的方法
Feb 12 Javascript
Linux下使用jq友好的打印JSON技巧分享
Nov 18 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
Feb 04 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
Mar 28 Javascript
详解Vue2.0里过滤器容易踩到的坑
Jun 01 Javascript
vue 1.x 交互实现仿百度下拉列表示例
Oct 21 Javascript
每天学点Vue源码之vm.$mount挂载函数
Mar 11 Javascript
layui 实现加载动画以及非真实加载进度的方法
Sep 23 Javascript
通过微信公众平台获取公众号文章的方法示例
Dec 25 Javascript
JS实现图片预览的两种方式
Jun 27 #Javascript
JavaScript转换数据库DateTime字段类型方法
Jun 27 #Javascript
JavaScript标准对象_动力节点Java学院整理
Jun 27 #Javascript
JavaScript闭包_动力节点Java学院整理
Jun 27 #Javascript
JavaScript创建对象_动力节点Java学院整理
Jun 27 #Javascript
JavaScript字符串_动力节点Java学院整理
Jun 27 #Javascript
JavaScript变量作用域_动力节点Java学院整理
Jun 27 #Javascript
You might like
PHP目录函数实现创建、读取目录教程实例
2011/01/13 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
SyntaxHighlighter代码加色使用方法
2008/09/07 Javascript
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
2010/11/05 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
2014/12/08 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
2015/03/28 Javascript
javascript闭包(Closure)用法实例简析
2015/11/30 Javascript
深入理解angular2启动项目步骤
2017/07/15 Javascript
Node.js 基础教程之全局对象
2017/08/06 Javascript
Vue Router的懒加载路径的解决方法
2018/06/21 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
2019/09/19 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
2019/10/23 Javascript
小程序跨页面交互的作用与方法详解
2020/01/07 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
2020/02/06 Javascript
Typescript3.9 常用新特性一览(推荐)
2020/05/14 Javascript
JavaScript实现多文件下载方法解析
2020/08/07 Javascript
整理Python中的赋值运算符
2015/05/13 Python
Python实现SSH远程登陆,并执行命令的方法(分享)
2017/05/08 Python
python 连接各类主流数据库的实例代码
2018/01/30 Python
Django中Model的使用方法教程
2018/03/07 Python
Python cookbook(数据结构与算法)筛选及提取序列中元素的方法
2018/03/19 Python
使用python爬取B站千万级数据
2018/06/08 Python
python numpy 部分排序 寻找最大的前几个数的方法
2018/06/27 Python
python3中类的继承以及self和super的区别详解
2019/06/26 Python
对Python中一维向量和一维向量转置相乘的方法详解
2019/08/26 Python
Pandas时间序列:时期(period)及其算术运算详解
2020/02/25 Python
用python按照图像灰度值统计并筛选图片的操作(PIL,shutil,os)
2020/06/04 Python
python生成xml时规定dtd实例方法
2020/09/21 Python
CSS3绘制超炫的上下起伏波动进度加载动画
2016/04/21 HTML / CSS
全球最大运动品牌的男装、女装和童装官方库存商:A&A Sports
2021/01/17 全球购物
保护动物的标语
2014/06/11 职场文书
查摆问题自查报告范文
2014/10/13 职场文书
单位未婚证明范本
2014/11/25 职场文书
毕业生党员个人总结
2015/02/14 职场文书
MySQL 存储过程的优缺点分析
2021/05/20 MySQL