我是靠谱客的博主 正直八宝粥,最近开发中收集的这篇文章主要介绍react组件通信,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

React组件之间如何通信?

组件之间的通信分为 父传子通信 , 子传父通信 ,非父子组件通信

  1. 父传子:
    在父组件中的子组件标签上绑定自定义属性,挂载传递的数据
    子组件中props接收传递过来的数据,直接使用即可

  2. 子传父:
    父组件中子组件标签上绑定一个属性,传递一个方法给子组件
    子组件中通过props接收这个方法,直接调用,传递相应的参数就可以

  3. 非父子组件:可以使用状态提升(中间人模式)、context状态树传参

    • 状态提升(中间人模式):react中的状态提升概括来说就是将多个组件需要共享的状态提升到离它们最近的父组件,在父组件上改变这个状态,然后通过props分发给子组件

    • Context状态树传参:在父组件中我们通过createContext()创建一个空对象,在父组件的最外层我们使用Provider包裹数据,通过value绑定要传递的对象数据

      在嵌套的子组件中,我们有两种方式获取数据:

        1. 我们可以使用Customer标签,在标签中绑定一个箭头函数,函数的形参context就是value传递的数据
        2. Class组件中我们可以定义static contextType=context对象,组件中直接使用this.context获取数据
      

最后

以上就是正直八宝粥为你收集整理的react组件通信的全部内容,希望文章能够帮你解决react组件通信所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(37)

评论列表共有 0 条评论

立即
投稿
返回
顶部