我学react之父子组件通信

wwolf 发布于2019-08-23 15:38 / 1050人阅读

摘要：父子组件通信父子间通信的几种情况父组件向子组件通信子组件向父组件通信跨级组件通信兄弟组件通信父组件向子组件通信由于是单向数据流向的，父组件一般通过向子组件传递相关的一些信息来看一下下面这个例子，在这里我封装了一个组件，它的显示与取消的状态交

react父子组件通信

react父子间通信的几种情况

父组件向子组件通信

子组件向父组件通信

跨级组件通信

兄弟组件通信

父组件向子组件通信

由于react是单向数据流向的，父组件一般通过props向子组件传递相关的一些信息
来看一下下面这个例子，在这里我封装了一个modal组件，它的显示与取消的状态交由父组件来管理，它们之间的关系用一张图表示
流程图
代码如下

父组件代码

这样子组件中的visible就被父组件接管了

子组件向父组件通信

子组件向父组件通信同样需要父组件向子组件传递props，只是父组件传递的是是作用域为自己的函数，子组件调用次函数，并将子组件想要传递的信息，作为参数，传递到父组件的作用域中

还是以上面的这个例子距离，当打开模态框的时候，通过父组件的

showModal()方法，改变visible的值，通过props传递到子组件，

关闭模态框是由内向外的。模态框在内部改变visible的值在把它传递给外部的方法

代码如下

父组件

跨级组件通信

通过context进行通信，我们可以把组件之间的关系想象成一个组件树，原始的方法就是通过props一级一级的把状态往下传，在通过调用方法一级一级传回去，另一种方法就是在他们之间设置一个区域，每个组件都可以访问到，相当于父组件下的一个全局变量

代码

最头部的父组件

class Index extends Component {
  static childContextTypes = {
    themeColor: PropTypes.string
  }

  constructor () {
    super()
    this.state = { themeColor: "red" }
  }

  getChildContext () {
    return { themeColor: this.state.themeColor }
  }

  render () {
    return (
      
        
        
      
    )
  }
}

要在父组件设置这个context区域，在childContextTypes中设置允许子组件们访问的变量的名称，getChildContext（）会设置这个区域，这样所有的子组件都可以访问到themeColor这个参数了

子组件如何访问

class Title extends Component {
  static contextTypes = {
    themeColor: PropTypes.string
  }

  render () {
    return (
      React.js 小书标题
    )
  }
}

通过在this.context的方式就可以访问到了

私有云服务器托管父子组件通信父子组件父子组件通讯父子组件-动态渲染

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102350.html

Vue 组件间通信方式

摘要：本身提供哪几种通信方式首先灵感源于，支持双向绑定，本质还是单向数据流。跟一样，组件间最基本的数据流是通过向子组件传递数据。但是在却很少使用，因为组件可以自定义事件，即后面的组件间通信方式其实就是订阅发布模式。例子是在 jsrun.net 平台编写，不支持移动端平台，所以本文建议在 PC 端进行阅读。 Vue 是数据驱动的视图框架，那么组件间的数据通信是必然的事情，那么组件间如何进行数...

hss01248 2019-08-26 13:54 评论0 收藏0
React之组件通信

摘要：最近闲来无事自学框架，自学过程中所有的问题经验都会在此记录，希望可以帮助到学习框架的同学废话不多说上代码。最近闲来无事自学React框架，自学过程中所有的问题经验都会在此记录，希望可以帮助到学习React框架的同学,废话不多说上代码。首先是父传子： import React, { Component } from react; import Com1 from ./componmen...

binta 2019-08-26 13:42 评论0 收藏0
解密传统组件间通信与React组件间通信

摘要：同时吸取了社区大量优秀思想，进行归纳比对。有兴趣的读者可以点击下面的链接购买，再次感谢各位的支持与鼓励恳请各位批评指正京东当当原文网址在React中最小的逻辑单元是组件，组件之间如果有耦合关系就会进行通信，本文将会介绍React中的组件通信的不同方式通过归纳范，可以将任意组件间的通信归类为四种类型的组件间通信，分别是父子组件，爷孙组件，兄弟组件和任意组件，需要注意的是前三个也可以算...

CoderBear 2019-08-23 12:01 评论0 收藏0
Hooks 与 React 生命周期的关系

摘要：更新阶段卸载阶段兄弟节点之间的通信主要是经过父组件和也是通过改变父组件传递下来的实现的，满足的设计遵循单向数据流模型，因此任何两个组件之间的通信，本质上都可以归结为父子组件更新的情况。你真的了解 React 生命周期吗？ React 生命周期很多人都了解，但通常我们所了解的都是单个组件的生命周期，但针对 Hooks 组件、多个关联组件（父子组件和兄弟组件）的生命周期又是怎么样的...

oliverhuang 2019-08-26 10:25 评论0 收藏0
react开发教程（八）React组件通信

摘要：父子组件通讯通讯手段这是最常见的通信方式，父组件只需要将子组件需要的传给子组件，子组件直接通过来使用。父子组件通讯通讯手段这是最常见的通信方式，父组件只需要将子组件需要的props传给子组件，子组件直接通过this.props来使用。通讯内容更多要提的是如何合理的设置子组件的props，要想将子组件设计成一个复用性强的通用组件，需要将能够复用的部分抽象出来，抽象出来的props有两...

kamushin233 2019-08-21 11:51 评论0 收藏0