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 相关文章推荐
JavaScript 验证浏览器是否支持javascript的方法小结
May 17 Javascript
jquery下异步提交表单 异步跨域提交表单
Nov 17 Javascript
JavaScript中的作用域链和闭包
Jun 30 Javascript
jQuery操作input值的各种方法总结
Nov 21 Javascript
js调出上下文菜单的实例
Dec 17 Javascript
JavaScript知识点总结之如何提高性能
Jan 15 Javascript
javascript的BOM
May 03 Javascript
JS+Canvas绘制时钟效果
Aug 20 Javascript
javascript运算符——逻辑运算符全面解析
Jun 27 Javascript
JavaScript中var、let、const区别浅析
Jun 24 Javascript
微信小程序结合mock.js实现后台模拟及调试
Mar 28 Javascript
JavaScript实现雪花飘落效果
Dec 27 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中实现汉字转区位码应用源码实例解析
2010/06/14 PHP
使用GROUP BY的时候如何统计记录条数 COUNT(*) DISTINCT
2011/04/23 PHP
使用openssl实现rsa非对称加密算法示例
2014/01/24 PHP
php多功能图片处理类分享(php图片缩放类)
2014/03/14 PHP
php将图片保存入mysql数据库失败的解决方法
2014/12/27 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
php学习笔记之字符串常见操作总结
2019/07/16 PHP
PHP实现通过二维数组键值获取一维键名操作示例
2019/10/11 PHP
use jscript List Installed Software
2007/06/11 Javascript
jquery实现图片裁剪思路及实现
2013/08/16 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
2014/07/21 Javascript
Angular.JS学习之依赖注入$injector详析
2016/10/20 Javascript
Js利用Canvas实现图片压缩功能
2017/09/13 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
2018/01/18 Javascript
nodejs 简单实现动态html的方法
2018/05/12 NodeJs
postman自定义函数实现 时间函数的思路详解
2019/04/17 Javascript
[01:04:49]KG vs LGD 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
从零学Python之hello world
2014/05/21 Python
jupyter安装小结
2016/03/13 Python
Python简单生成8位随机密码的方法
2017/05/24 Python
基于python3 类的属性、方法、封装、继承实例讲解
2017/09/19 Python
python语音识别实践之百度语音API
2018/08/30 Python
python通过zabbix api获取主机
2018/09/17 Python
Python中的asyncio代码详解
2019/06/10 Python
python 判断三个数字中的最大值实例代码
2019/07/24 Python
python_mask_array的用法
2020/02/18 Python
Python word文本自动化操作实现方法解析
2020/11/05 Python
python 如何引入协程和原理分析
2020/11/30 Python
python函数超时自动退出的实操方法
2020/12/28 Python
加拿大花店:1800Flowers.ca
2016/11/16 全球购物
民族团结先进个人材料
2014/02/05 职场文书
贷款委托书范本
2014/04/08 职场文书
2014年企业工会工作总结
2014/11/12 职场文书
测量员岗位职责
2015/02/14 职场文书
生日宴会家属答谢词
2015/09/29 职场文书
党务工作者主要事迹材料
2015/11/03 职场文书