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 相关文章推荐
myFocus slide3D v1.1.0 使用方法与下载
Jan 12 Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
Dec 09 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
Jan 14 Javascript
Bootstrap表单简单实现代码
Mar 06 Javascript
微信小程序选择图片和放大预览图片功能
Nov 02 Javascript
关于react中组件通信的几种方式详解
Dec 10 Javascript
node.js爬取中关村的在线电瓶车信息
Nov 13 Javascript
JavaScript怎样在删除前添加确认弹出框?
May 27 Javascript
小程序分页实践之编写可复用分页组件
Jul 18 Javascript
layer实现弹出层自动调节位置
Sep 05 Javascript
Vuex,iView UI面包屑导航使用扩展详解
Nov 04 Javascript
Rust中的Struct使用示例详解
Aug 14 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&amp;mysql(三)
2006/10/09 PHP
thinkphp配置文件路径的实现方法
2016/08/30 PHP
php 伪造HTTP_REFERER页面URL来源的三种方法
2016/09/22 PHP
php实现微信扫码自动登陆与注册功能
2016/09/22 PHP
php解析base64数据生成图片的方法
2016/12/06 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
基于jQuery的为attr添加id title等效果的实现代码
2011/04/20 Javascript
javascript 进阶篇2 CSS XML学习
2012/03/14 Javascript
用js判断页面是否加载完成实现代码
2012/12/11 Javascript
js 高效去除数组重复元素示例代码
2013/12/19 Javascript
JavaScript实现的使用键盘控制人物走动实例
2014/08/27 Javascript
javascript实现根据身份证号读取相关信息
2014/12/17 Javascript
jquery实现对联广告的方法
2015/02/05 Javascript
JS给超链接加确认对话框的方法
2015/02/24 Javascript
js实现简单选项卡与自动切换效果的方法
2015/04/10 Javascript
jQuery原生的动画效果
2015/07/10 Javascript
基于JavaScript实现一定时间后去执行一个函数
2015/12/14 Javascript
Bootstrap页面布局基础知识全面解析
2016/06/13 Javascript
jQuery对table表格进行增删改查
2020/12/22 Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
2017/08/16 Javascript
angularjs路由传值$routeParams详解
2020/09/05 Javascript
Python基于lxml模块解析html获取页面内所有叶子节点xpath路径功能示例
2018/05/16 Python
Flask实现跨域请求的处理方法
2018/09/27 Python
Python时间和字符串转换操作实例分析
2019/03/16 Python
python列表推导式操作解析
2019/11/26 Python
将python字符串转化成长表达式的函数eval实例
2020/05/11 Python
结束运行python的方法
2020/06/16 Python
序列化Python对象的方法
2020/08/01 Python
Python开发入门——迭代的基本使用
2020/09/03 Python
Python pip install之SSL异常处理操作
2020/09/03 Python
Android本地应用打开方法——通过html5写连接
2016/03/11 HTML / CSS
售后服务科岗位职责范文
2013/11/13 职场文书
餐厅楼面主管岗位职责范本
2014/02/16 职场文书
教师批评与自我批评
2014/10/15 职场文书
纯html+css实现Element loading效果
2021/08/02 HTML / CSS
Nginx下SSL证书安装部署步骤介绍
2021/12/06 Servers