React组件间的通讯

  组件化开发应该是React核心功能之一,组件之间的通讯也是我们做React开发必要掌握的技能。接下来我们将从组件之间的关系来分解组件间如何传递数据。

1.父组件向子组件传递数据

  通讯是单向的,数据必须是由一方传到另一方。在 React 中,父组件可以向子组件通过传 props 的方式,向子组件进行通讯。

class Parent extends Component{
  state = {
    msg: ‘start‘
  };

  componentDidMount() {
    setTimeout(() => {
      this.setState({
        msg: ‘end‘
      });
    }, 1000);
  }

  render() {
    return <Child_1 msg={this.state.msg} />;
  }
}
class Child_1 extends Component{
  render() {
    return <p>{this.props.msg}</p>
  }
}

  如果父组件与子组件之间不止一个层级,如 Parent 与 Child_1_1 这样的关系(即Parent>Child_1>Child_1_1),可通过 ... 运算符(Object 剩余和展开属性),将父组件的信息,以更简洁的方式传递给更深层级的子组件。通过这种方式,不用考虑性能的问题,通过 babel 转义后的 ... 运算符 性能和原生的一致,且上级组件 props 与 state 的改变,会导致组件本身及其子组件的生命周期改变。

// 向 Child_1_1 传递 Parent 组件的信息
class Child_1 extends Component{
  render() {
    return <div>
      <p>{this.props.msg}</p>
      <Child_1_1 {...this.props}/>
    </div>
  }
}

class Child_1_1 extends Component{
  render() {
    return <p>{this.props.msg}</p>
  }
}

2.子组件向父组件传递数据

  在上一个例子中,父组件可以通过传递 props 的方式,自顶而下向子组件进行通讯。而子组件向父组件传递数据,同样也需要父组件向子组件传递 props 进行通讯,只是父组件传递的是作用域为父组件自身的函数,子组件调用该函数,将子组件想要传递的信息,作为参数,传递到父组件的作用域中。

// 父组件 Parent
class Parent extends Component{
  state = {
    msg: ‘start‘
  };

  transferMsg(msg) {
    this.setState({
      msg
    });
  }

  render() {
    return <div>
        <p>child msg: {this.state.msg}</p>
        <Child_1 transferMsg = {msg => this.transferMsg(msg)} />
      </div>;
  }
}
// 子组件 Child_1
class Child_1 extends Component{
  componentDidMount() {
    setTimeout(() => {
      this.props.transferMsg(‘end‘)
    }, 1000);
  }

  render() {
    return <div>
      <p>child_1 component</p>
    </div>
  }
}

  在上面的例子中,我们使用了 箭头函数,将父组件的 transferMsg 函数通过 props 传递给子组件,得益于箭头函数,保证子组件在调用 transferMsg 函数时,其内部 this 仍指向父组件。

  当然,对于层级比较深的子组件与父组件之间的通讯,仍可使用 ... 运算符,将父组件的调用函数传递给子组件,具体方法和上面的例子类似。

原文地址:https://www.cnblogs.com/onebox/p/9599234.html

时间: 2024-10-07 12:13:17

React组件间的通讯的相关文章

React 组件间通讯

React 组件间通讯 说 React 组件间通讯之前,我们先来讨论一下 React 组件究竟有多少种层级间的关系.假设我们开发的项目是一个纯 React 的项目,那我们项目应该有如下类似的关系: 父子:Parent 与 Child_1.Child_2.Child_1_1.Child_1_2.Child_2_1 兄弟:Child_1 与 Child_2.Child_1_1 与 Child_2.etc. 针对这些关系,我们将来好好讨论一下这些关系间的通讯方式. (在 React 中,React 组

vue 和 react 组件间通信方法对比

vue 和 react 组件间通信方法对比 通信路径 vue的方法 react的方法 父组件 => 子组件 props(推荐).this.$refs.this.$children props 子组件 => 父组件 自定义事件($emit.$on)(推荐).this.$parent 回调函数(推荐) 非父子组件(兄弟组件.跨级组件) bus 高阶组件(推荐).自定义事件.context 原文地址:https://www.cnblogs.com/cag2050/p/9054840.html

React组件间的通信

1.子组件调用父组件,采用props的方式进行调用和赋值,在父组件中设置相关属性值或者方法,子组件通过props的方式进行属性赋值或者方法调用: 2.父组件调用子组件,采用refs的方式进行调用,需要父组件在调用子组件的时候,添加ref属性,并进行唯一命名,在父组件中即可调用: 子组件调用父组件 创建一个简单组件ButtonComment,调用此组件是需传递参数buttonName,并创建初始化方法getInitialState及点击事件sendSword : var ButtonComment

父子组件间的通讯

因为vue进行组件开发时候,允许组件进行嵌套,因此父子组件需要进行通讯来获取父组件或子组件中的数据. 父传子 父组件给子组件传数据通过在子组件的标签上绑定属性,将数据绑定给某个属性 子组件要获取父组件传过来的信息,必须在内部定义props属性 子组件标签上: :c-message="message" 子组件内部定义porps: 数组写法 props:['cMessage'] 对象写法 props:{   cMessage:String//数据类型限制} 最全的设置写法 props:{

React 组件间通信

https://jsfiddle.net/69z2wepo/9719/ <script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script> <div id="container"> <!-- This element's contents will be replaced with your component. -->

React独立组件间通信联动

React是现在主流的高效的前端框架,其官方文档 http://reactjs.cn/react/docs/getting-started.html 在介绍组件间通信时只给出了父子组件间通信的方法,而没有给出独立组件间通信的解决方案.这里我介绍一种不错的实现方式——signals. 第一步,我们要建立两个简单的react组件——一个进度条和一个输入框. 组件——进度条: var ProcessBar=React.createClass({ getInitialState:function(){

React数据流和组件间的沟通总结

今天来给大家总结下React的单向数据流与组件间的沟通. 首先,我认为使用React的最大好处在于:功能组件化,遵守前端可维护的原则. 先介绍单向数据流吧. React单向数据流: React是单向数据流,数据主要从父节点传递到子节点(通过props). 如果顶层(父级)的某个props改变了,React会重渲染所有的子节点. 刚才我们提到了Props,怎么理解Props呢? Props:  props是property的缩写,可以理解为HTML标签的attribute. 不可以使用this.p

React的单向数据流与组件间的沟通

今天来给大家总结下React的单向数据流与组件间的沟通. 首先,我认为使用React的最大好处在于:功能组件化,遵守前端可维护的原则. 先介绍单向数据流吧. React单向数据流: React是单向数据流,数据主要从父节点传递到子节点(通过props). 如果顶层(父级)的某个props改变了,React会重渲染所有的子节点. 刚才我们提到了Props,怎么理解Props呢? Props:  props是property的缩写,可以理解为HTML标签的attribute. 不可以使用this.p

React 中组件间通信的几种方式

在使用 React 的过程中,不可避免的需要组件间进行消息传递(通信),组件间通信大体有下面几种情况: 父组件向子组件通信 子组件向父组件通信 非嵌套组件间通信 跨级组件之间通信 1.父组件向子组件通信父组件通过向子组件传递 props,子组件得到 props 后进行相应的处理.演示代码:父组件 parent.js: import React,{ Component } from "react"; export default class App extends Component{