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 相关文章推荐
学习YUI.Ext 第七天--关于View&amp;JSONView
Mar 10 Javascript
extjs 学习笔记(二) Ext.Element类
Oct 13 Javascript
jquery1.5.1中根据元素ID获取元素对象的代码
Apr 02 Javascript
JQuery $.each遍历JavaScript数组对象实例
Sep 01 Javascript
AngularJS入门教程之Select(选择框)详解
Jul 27 Javascript
JavaScript数组操作函数汇总
Aug 05 Javascript
jQuery实现背景滑动菜单
Dec 02 Javascript
代码详解JS操作剪贴板
Feb 11 Javascript
AngularJS中重新加载当前路由页面的方法
Mar 09 Javascript
webpack源码之loader机制详解
Apr 06 Javascript
JavaScript动态创建二维数组的方法示例
Feb 01 Javascript
vue 实现Web端的定位功能 获取经纬度
Aug 08 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
如何实现给定日期的若干天以后的日期
2006/10/09 PHP
php sprintf()函数让你的sql操作更安全
2008/07/23 PHP
ThinkPHP3.1新特性之查询条件预处理简介
2014/06/19 PHP
PHP中模拟链表和链表的基本操作示例
2016/02/27 PHP
利用php-cli和任务计划实现订单同步功能的方法
2017/05/03 PHP
PHP面向对象多态性实现方法简单示例
2017/09/27 PHP
JavaScript 仿关机效果的图片层
2008/12/26 Javascript
用jQuery打造TabPanel效果代码
2010/05/22 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
2011/02/24 Javascript
JS判断表单输入是否为空(示例代码)
2013/12/23 Javascript
JQuery点击事件回到页面顶部效果的实现代码
2016/05/24 Javascript
javascript实现滑动解锁功能
2017/03/22 Javascript
js单页hash路由原理与应用实战详解
2017/08/14 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
2018/03/27 Javascript
微信小程序全局变量改变监听的实现方法
2019/07/15 Javascript
WEB前端性能优化的7大手段详解
2020/02/04 Javascript
html-webpack-plugin修改页面的title的方法
2020/06/18 Javascript
JavaScript如何判断对象有某属性
2020/07/03 Javascript
vue 数据双向绑定的实现方法
2021/03/04 Vue.js
[02:59]DOTA2完美大师赛主赛事第三日精彩集锦
2017/11/25 DOTA
python中List的sort方法指南
2014/09/01 Python
python利用datetime模块计算时间差
2015/08/04 Python
Flask的图形化管理界面搭建框架Flask-Admin的使用教程
2016/06/13 Python
python-str,list,set间的转换实例
2018/06/27 Python
Html5移动端弹幕动画实现示例代码
2018/08/27 HTML / CSS
简单整理HTML5的基本特性和语法
2016/02/18 HTML / CSS
英国最大的自有市场,比亚马逊便宜:Flubit
2019/03/19 全球购物
我看到了用指针调用函数的不同语法形式
2014/07/16 面试题
优秀毕业生求职信范文
2014/01/02 职场文书
团结演讲稿范文
2014/05/23 职场文书
合作意向书
2014/07/30 职场文书
刑事上诉状(无罪)
2015/05/23 职场文书
mysql的MVCC多版本并发控制的实现
2021/04/14 MySQL
详解MindSpore自定义模型损失函数
2021/06/30 Python
Python实现双向链表
2022/05/25 Python
windows系统搭建WEB服务器详细教程
2022/08/05 Servers