脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React组件间通信

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

 更新时间：2017年06月27日 11:09:22   作者：璀璨天宇  
本篇文章主要介绍了React组件间通信的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

最近学习浅尝则止的学习了一下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')
 );

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • React Native时间转换格式工具类分享

    React Native时间转换格式工具类分享

    这篇文章主要为大家分享了React Native时间转换格式工具类，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-10-10
  • React组件里this指向了undefined原理解析

    React组件里this指向了undefined原理解析

    这篇文章主要为大家介绍了React组件里this指向了undefined原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-03-03
  • React错误边界Error Boundaries详解

    React错误边界Error Boundaries详解

    错误边界是一种React组件,这种组件可以捕获发生在其子组件树任何位置的JavaScript错误,并打印这些错误,同时展示降级UI,而并不会渲染那些发生崩溃的子组件树
    2022-12-12
  • React在弱网环境下限制按钮多次点击,防止重复提交问题

    React在弱网环境下限制按钮多次点击,防止重复提交问题

    这篇文章主要介绍了React在弱网环境下限制按钮多次点击,防止重复提交问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-06-06
  • react字符串匹配关键字高亮问题

    react字符串匹配关键字高亮问题

    这篇文章主要介绍了react字符串匹配关键字高亮问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-12-12
  • 利用React高阶组件实现一个面包屑导航的示例

    利用React高阶组件实现一个面包屑导航的示例

    这篇文章主要介绍了利用React高阶组件实现一个面包屑导航的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • 官方推荐react-navigation的具体使用详解

    官方推荐react-navigation的具体使用详解

    本篇文章主要介绍了官方推荐react-navigation的具体使用详解，react-navigation是致力于解决导航卡顿，数据传递，Tabbar和navigator布局，支持redux。非常具有实用价值，需要的朋友可以参考下
    2018-05-05
  • React实现二级联动的方法

    React实现二级联动的方法

    这篇文章主要为大家详细介绍了React实现二级联动的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • Redux DevTools不能显示数据问题

    Redux DevTools不能显示数据问题

    这篇文章主要介绍了Redux DevTools不能显示数据问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • react-router JS 控制路由跳转实例

    react-router JS 控制路由跳转实例

    这篇文章主要介绍了react-router JS 控制路由跳转实例，react实现路由可以直接使用react-router。有兴趣的可以了解一下
    2017-06-06

最新评论