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

2024-11-26 13:17:38

最近学习浅尝则止的学习了一下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进阶学习之组件的解耦之道

前言众所周知,React中的组件非常的灵活可扩展,不过随着业务复杂度的增加和许多外部工具库的引入,组件往往也会显得浮肿,接下来我们就一起来看看常见的几种,遵循单一职责原则的,组件分割与解耦的方法,话不多说了,来一起看看详细的介绍: 一.分割 render 函数当一个组件渲染的内容较多时,有一个快速并且通用的方法是创建sub-render函数来简化原来庞大的 render class Panel extends React.Component { renderHeading() { // ..
基于react组件之间的参数传递(详解)

1.父组件向子组件传递参数 class Child extends Component { componentDidMount(){ let name = this.props.default; console,log(name); } render(){ const { default} = this.props; return ( <Input /> ) } } import React, { Component } from 'react'; import Child from './C
使用React实现轮播效果组件示例代码

前言我发现React和AngularJS思想完全不同,AngularJS是基于双向绑定,在Modal层中定制数据,然后双向改变.但是React是通过prop和state来改变view层的状态.下面是我写的一个轮播图组件,可以直接看一下.代码很简单.原理就是通过React在componentDidMount后改变setState,来动态改变css样式. 说明以下:看gif很卡,但是实际效果还是很好的. 以下是示例代码 LunBo.js require('styles/App.css'); req
React创建组件的三种方式及其区别

React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归:具体的三种方式: 函数式定义的无状态组件 es5原生方式React.createClass定义的组件 es6形式的extends React.Component定义的组件虽然有三种方式可以定义react的组件,那么这三种定义组件方式有什么不同呢?或者说为什么会出现对应的定义方式呢?下面就简单介绍一下. 无状态函数式组件创建无状态函数式组件形式是从React 0.14版本开始出现的.它是为了创建纯展示组件,这种组件
React组件生命周期详解

调用流程可以参看上图. React组件提供了生命周期的钩子函数去响应组件不同时刻的状态,组件的生命周期如下: 实例化存在期销毁期实例化首次调用组件时,有以下方法会被调用(注意顺序,从上到下先后执行): getDefaultProps 这个方法是用来设置组件默认的props,组件生命周期只会调用一次.但是只适合react.createClass直接创建的组件,使用ES6/ES7创建的这个方法不可使用,ES6/ES7可以使用下面方式: //es7 class Component { stat
详解React中的组件通信问题

引入本来我是没想过总结这些东西的,会感觉比较入门.但是之前同学去腾讯面试问到了这个问题(react或vue的组件通信),我帮他整理,顺便写demo的过程中,会有一些新的体会,多总结还是有利于进步的呀. 父子组件父 → 子 parent组件传给child组件,符合react的单向数据流理念,自上到下传递props. // 父组件 class Parent extends Component { constructor() { super(); this.state = { value: '',
React如何利用相对于根目录进行引用组件详解

前言本文主要给大家介绍了关于React利用相对于根目录进行引用组件的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 在对自己开发的组件中经常会做诸如以下的引用: import genFetchEntryListArgs from '../../../utils/table/genFetchEntryListArgs'; import { parseQuery, stringifyQuery } from '../../../utils/query'; import
React组件的三种写法总结

React 专注于 view 层,组件化则是 React 的基础,也是其核心理念之一,一个完整的应用将由一个个独立的组件拼装而成. 截至目前 React 已经更新到 v15.4.2,由于 ES6 的普及和不同业务场景的影响,我们会发现目前主要有三种创建 React 组件的写法:1. ES5写法React.createClass,2. ES6写法React.Component,3. 无状态的函数式写法(纯组件-SFC). 你们最钟爱哪种写法呢?萝卜青菜各有所爱~ 每个团队都有自己的代码规范和开发模
React组件之间的通信的实例代码

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

1. 组件通信我们知道Angular2应用程序实际上是有很多父子组价组成的组件树,因此,了解组件之间如何通信,特别是父子组件之间,对编写Angular2应用程序具有十分重要的意义,通常来讲,组件之间的交互方式主要有如下几种: 使用输入型绑定,把数据从父组件传到子组件通过 setter 拦截输入属性值的变化使用 ngOnChanges 拦截输入属性值的变化父组件监听子组件的事件父组件与子组件通过本地变量互动父组件调用 ViewChild 父组件和子组件通过服务来通讯本文会通过讲解着几
Vue父子组件之间的通信实例详解

在vue组件通信中其中最常见通信方式就是父子组件之中的通信,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使用,遇到业务逻辑操作时子组件触发父组件的自定义事件.无论哪种组织方式父子组件的通信方式都是大同小异. 一.父组件到子组件通讯父组件到子组件的通讯主要为:子组件接受使用父组件的数据,这里的数据包括属性和方法(String,Number,Boolean,Object, Array ,Function).vue提倡单项数据流,因
react开发教程之React 组件之间的通信方式

这两天学习了React感觉组件通信这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 父子组件通讯通讯手段这是最常见的通信方式,父组件只需要将子组件需要的props传给子组件,子组件直接通过this.props来使用. 通讯内容更多要提的是如何合理的设置子组件的props,要想将子组件设计成一个复用性强的通用组件,需要将能够复用的部分抽象出来,抽象出来的props有两种形成,一种是简单的变量,另一种是抽象出来处理某种逻辑函数. 以Header 组件为例 //HeaderBar.j
vue实现父子组件之间的通信以及兄弟组件的通信功能示例

本文实例讲述了vue实现父子组件之间的通信以及兄弟组件的通信功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net vue父子组件通信.兄弟组件通信</title> <style> *{ margin: 0; padding: 0; l
React 组件间的通信示例

前言从官网上也有介绍组件间如何通信,但不够详细,这里做个小结,方便对比和回顾本文内容处理组件之间的通信, 主要取决于组件之间的关系,因此我们划分为以下三种: [父组件]向[子组件]传值: [子组件]向[父组件]传值: [组件A]向无关系[组件B]传值,一般为兄弟组件: 一.「父组件」向「子组件」传值这是最普遍的用法,实现上也非常简单,主要是利用props来实现 // 父组件 import React from 'react'; import Son from './components/
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)

我们接着上文继续,本文我们讲解兄弟组件的通信,项目结构还是跟上文一样. 在src/assets目录下建立文件EventHandler.js,该文件的作用在于给同级组件之间传递事件 EventHandler.js代码: import Vue from 'Vue'; export default new Vue(); 1,在Components目录下新建一个组件Brother1.vue <template> <div> <h3>Z国: ghostwu</h3>
react native 仿微信聊天室实例代码

一.前言 9月,又到开学的季节.为每个一直默默努力的自己点赞!最近都沉浸在react native原生app开发中,之前也有使用vue/react/angular等技术开发过聊天室项目,另外还使用RN技术做了个自定义模态弹窗rnPop组件. 一.项目简述基于react+react-native+react-navigation+react-redux+react-native-swiper+rnPop等技术开发的仿微信原生App界面聊天室--RN_ChatRoom,实现了原生app启动页.As
详解vue组件之间的通信

说明:下面我总结了比较常用的vue组件之前通信的方式,最近准备面试,所以有些总结贴上来分享 props和$emit 只有父子关系才可以用这种方式,父组件向子组件传递参数用props,子向父传递使用触发$emit自定义事件 1.props  <Child :name="n
vue2.0父子组件及非父子组件之间的通信方法

1.父组件传递数据给子组件父组件数据如何传递给子组件呢?可以通过props属性来实现父组件: <parent> <child :child-msg="msg"></child>//这里必须要用 - 代替驼峰 </parent> data(){ return { msg: [1,2,3] }; } 子组件通过props来接收数据: 方式1: props: ['childMsg'] 方式2 : props: { childMsg: Arr

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

相关推荐

随机推荐