react之组件通信详解

2024-04-02 19:04:59 235人浏览安东尼

摘要

目录父组件与子组件通信子组件与父组件通信跨组件通信祖先子孙兄弟节点通信总结父组件与子组件通信父组件将自己的状态传递给子组件，子组件当做属性来接收，当父组件更改自己状态的时

父组件与子组件通信

父组件将自己的状态传递给子组件，子组件当做属性来接收，当父组件更改自己状态的时候，子组件接收到的属性就会发生改变
父组件利用ref对子组件做标记，通过调用子组件的方法以更改子组件的状态,也可以调用子组件的方法

父组中定义ref引用


import React,{Component,createRef} from 'react'
import Child1 from './Child1'
export default class App extends Component {
    constructor(props){
        super(props)
        this.child=createRef()
    }
    render(){
        return(
            <div>
                <Child1 ref={this.child}/>
                <button onClick={this.fn.bind(this)}></button>
            </div>
        )
    }
    fn(){
        const child=this.child.current
        child.setTitle()
    }
}

子组件定义好数据源和修改数据源方法


import React,{Component} from 'react'
export default class Child1 extends Component{
    state={
        title:'标题'
    }
    render(){
        return (
            <div>
                {this.state.title}
            </div>
        )
    }
    setTitle(){
        this.setstate({title:'hh'})
    }
}

子组件与父组件通信

父组件将自己的某个方法传递给子组件，在方法里可以做任意操作，比如可以更改状态，子组件通过this.props接收到父组件的方法后调用。

跨组件通信

在react没有类似Vue中的事件总线来解决这个问题，一是我们借助它们共同的父级组件通过代理的方式来实现，但过程会相当繁锁。react提供了Context来实现跨组件通信, 而不必显式地通过组件树的逐层传递 props。

复杂的非父子组件通信在react中很难处理，多组件间的数据共享也不好处理，在实际的工作中我们会使用flux、redux、mobx来实现

祖先子孙

定义store类导出createContext中的Provider,COnsumer
在祖先节点中发布消息： Provider value=任意数据
在子孙节点中订阅：Consumer 回调函数{value=>(组件)}
1.定义数据源store
store.js


import React , {createContext} from 'react'
let {Provider,Consumer} = createContext()
export { 
    Provider,//发布
    Consumer//订阅
    }

2.祖先节点


import React ,{Component} from 'react'
import {Provider,Consumer} from './store'
import Son from './Son'
export default class App extends Component{
    constructor(props){
        super(props)
        this.state={
            name:'minGCen'
        }
    }
    render(){
        return (
            <div>
                <Provider value={this.state.name}>
                    <Son/>
                </Provider>
            </div>
        )
    }
}

3.后代节点


import React,{Component} from'react'
import {Consumer} from './store'
export default class Son1 extends Component{
    constructor(props){
        super(props)
        this.state={
            name:'uuu'
        }
    }
    render(){
        return(
            <div>
                <Consumer>
                   {
                        value=>{
                            <div>{value.name}</div>
                        }
                   }
                </Consumer>
            </div>
        )
    }
}

兄弟节点通信

一个子物体挂在事件
另一个挂在属性
通过实践改变属性，来改变另一个组件接受的内容

祖先


state={
    count:1,
    setCount:()=>{
        this.setState(state=>{
            return{
                count:++state.count
            }
        })
    }
}
render(){
    let {count,setCount} = this.state
    return(
        <div>
            <Provider value={{count,setCount}}>
                <Cmp1></Cmp1>
                <Cmp2></Cmp2>
            </Provider>
        </div>
    )
}

兄弟Cmp2


import React, { Component ，createContext} from 'react'
export default class Cmp2 extends Component {
  // 只得到了默认数据 --> 没有包裹在Provider组件中
  static contextType = createContext
  render() {
    return (
      <div>
        <button onClick={this.setCount.bind(this)}>自增数据</button>
      </div>
    )
  }
  setCount() {
    this.context.setCount()
  }
}

兄弟Cmp1


<Consumer>
    {
        value => <h3>{value.count}</h3>
    }
</Consumer>

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注编程网的更多内容！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: react之组件通信详解

本文链接: https://www.lsjlt.com/news/154485.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

react之组件通信详解

目录父组件与子组件通信子组件与父组件通信跨组件通信祖先子孙兄弟节点通信总结父组件与子组件通信父组件将自己的状态传递给子组件，子组件当做属性来接收，当父组件更改自己状态的时...

99+

2024-04-02
详解React中组件之间通信的方式

一、是什么我们将组件间通信可以拆分为两个词：组件通信回顾Vue系列的文章，组件是vue中最强大的功能之一，同样组件化是React的核心思想相比vue，...

99+

2024-04-02
详解React hooks组件通信方法

目录一、前言二、父子组件通信1）父组件传值给子组件2）子组件传值给父组件3）跨组件传值（父传孙子组件）一、前言组件通信是React中的一个重要的知识点，下面列举一下 react h...

99+

2024-04-02
React中父子组件通信详解

目录父组件向子组件通信存在期父组件向子组件通信在父组件中，为子组件添加属性数据，即可实现父组件向子组件通信。传递的数据可以分成两类子组件是作为属性来接收这些数据的第一类就是数据...

99+

2024-04-02
React组件通信实现方式详解

目录1. 父子组件通信方式父传子子传父2. 非父子组件通信方式1. 父子组件通信方式 ✨父子组件之间的通信很常见，其中父组件可以通过props，原型方法向子组件通信，同时子组件也可以...

99+

2023-03-19

React组件通信 React通信 React组件通信的方式
React组件间传值及跨组件通信详解

目录组件间传值propsref状态提升跨组件通信组件间传值 props 父传子：通过自定义属性向子组件传值，值可以是任何类型子传父：通过父组件把方法传给子组件，子组件调用传过去的方...

99+

2024-04-02
React组件通信之路由传参(react-router-dom)

目录最近在学习react，现在的工作中使用的是vue，在学习的过程中对两者进行比较，加深理解。以下是react中的一小部分知识点，我个人觉得也是比较常用...

99+

2024-04-02
详解React的组件通讯

目录组件通讯介绍内容三种方式小结组件通讯-父传子内容：核心代码子组件接收数据组件通讯-子传父思路步骤核心代码小结组件通讯-兄弟组件思路核心代码组件通讯 -跨级组件通讯使用Contex...

99+

2024-04-02
React组件通信浅析

目录1、函数式组件2、类式组件1、函数式组件 <script type="text/babel"> // 1. 创建函数式组件 function Demo() {...

99+

2022-12-26

React组件 React组件通信
如何实现React组件之间的通信

这篇文章主要为大家展示了“如何实现React组件之间的通信”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何实现React组件之间的通信”这篇文章吧。1.定义两...

99+

2024-04-02
Vue3全局组件通信之provide / inject详解

目录1、前言2、provide / inject3、发起 provide4、接收 inject5、响应性数据的传递与接收6、引用类型的传递与接收 (针对非响应性数据的处理)7、基本类...

99+

2023-03-14

Vue3全局组件通信 Vue3全局组件 Vue3组件通信
React组件间怎么通信

本文小编为大家详细介绍“React组件间怎么通信”，内容详细，步骤清晰，细节处理妥当，希望这篇“React组件间怎么通信”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。一、父子组件...

99+

2024-04-02
Vue组件之间四种通信方式详解

目录前言父子组件通信父组件与子孙组件的通信父组件获取子组件数据无需考虑组件关系的通信前言 vue 框架提供了前端开发组件的思想，可以通过组件来组合成一个完整的页面，都是随着组...

99+

2024-04-02
React组件通信如何实现

这篇文章主要介绍“React组件通信如何实现”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“React组件通信如何实现”文章能帮助大家解决问题。1. 父子组件通信方式父子组件之间的通信很常见，其中父组...

99+

2023-07-05
React中组件之间通信的方式是什么

本篇内容介绍了“React中组件之间通信的方式是什么”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！一、是什么我们将组件间通信可以拆分为两个词...

99+

2023-06-20
如何解决React中组件通信问题

这篇文章将为大家详细讲解有关如何解决React中组件通信问题，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。父子组件父 → 子parent组件传给child组件，符合rea...

99+

2024-04-02
Vue组件之间的通信方式详细讲解

目录前言一、父级传数据给子级1、传输固定的具体数据2、动态语法3、子组件调用父组件二、子级传数据给父级1、使用自定义事件2、$refs的使用3、同级别组价以及任意组件之间的数据传递前...

99+

2024-04-02
angular父子组件通信详解

目录用到的api简单的例子person.ts父组件子组件效果总结用到的api Input - 子组件中定义可接受的属性，可以用来父组件给子组件传递数据 Output - 子组件中定义...

99+

2024-04-02
React 组件间怎么实现通信

本篇文章给大家分享的是有关React 组件间怎么实现通信，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。父子组件通讯通讯手段这是最常见的通信方式...

99+

2024-04-02
Vue非父子组件之间的通信方式详解

目录非父子组件的通信1.Provide和Inject1.1基本使用1.2处理响应式数据(了解)2.全局事件总线总结非父子组件的通信此篇讲解的是, 在学习状态管理之前, 非父子间通信...

99+

2024-04-02