React之组件通信

于 2024-06-24 15:50:58 发布
阅读量317 收藏 4
点赞数 6
分类专栏： React.js 文章标签： react.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40588441/article/details/139928617
版权

父传子

通过props传递

  • 共同的数据放在父组件上, 特有的数据放在自己组件内部(state)
  • 一般数据–>父组件传递数据给子组件–>子组件读取数据
  • 函数数据–>子组件传递数据给父组件–>子组件调用函数
  • 问题: 多层传递属性麻烦, 兄弟组件通信不方便

image-20201102143956518

通过ref

在input中进行ref标记，并调用

image-20201102151736664

子传父

在父组件定义函数，传递给子组件，子组件调用

问题：需要在子组件中改变父组件的状态

子组件中不能直接改变父组件的状态

状态在哪个组件，更新状态的行为就应该在哪个组件

解决：在父组件定义函数，传递给子组件，子组件调用

在父组件中定义函数

image-20201102145043175

在子组件中调用

image-20201102145331011

image-20201102145845890

通过ref

使用ref获取子组件的内容

image-20201102151941585

通过事件对象

image-20201102152250846

子与子

把数据都挂载父组件上

bus

vue中的bus

使用bus 空载实例

  • 声明使用bus.on
  • 调用使用bus.$emit

image-20201102165053074

react中的bus

  • 新建bus/index.js

    image-20201102170234435

  • 注册

    image-20201102170302171

  • 使用

    image-20201102170351121

爷传孙

Context 基于对象，注册的是数据

而bus是基于公共方法

image-20201102171206339

https://react.docschina.org/docs/context.html

  • 新建context/index.js

    image-20201102171534327

  • 爷组件中引入，创建上下文，作为数据提供者 并依赖注入

    image-20201102171917522

image-20201102172226115

  • 在孙组件使用

image-20201102190142150

image-20201102172906896

若梦plus
关注
专栏目录
React hooks组件通信
李白
08-02 396
组件通信是React中的一个重要的知识点，下面列举一下reacthooks中常用的父子、跨组件通信的方法。
使用ref方式实现组件通讯
云端-公子清
06-19 640
refs方式实现组件通讯 基于ref子组件传值子组件 $parent和$children 显示和隐藏只需4步： 1.在子组件voteButton中data(){ return { falg = true; } } 2.在子组件voteButton里面给div加上v-show="flag" 3.在父组件中加上<button @click="handle"></button>按钮标签加上handle方法 4.在父组件中methods:{ handl
React 父子组件之间的通信
qq_35605231的博客
11-11 2221
前言：     React是单向数据流，当有多个组件需要共享状态的时候，这就需要把状态放到这些组件共有的父组件中，相应地，这些组件就变成了子组件，从而涉及到父子组件之间的通信。父组件通过props 给子组件传递数据，子组件则是通过调用父组件传给它的函数给父组件传递数据。 父组件 App.js import React, { Component } from 'react'; import ...
React Ref父子通信
ma33xiao的博客
03-07 679
一、Ref版-表单域组件 父组件利用ref对子组件做标记，通过调用子组件的方法以更改子组件的状态,也可以调用子组件的方法 import React, { Component } from 'react' class Tenth extends React.Component { state = { value: '' } clear() { this.setState({ value: '' }) } render() { return
浅谈react中父子组件相互通信及ref的用法
黑星
10-11 2766
浅谈react中父子组件相互通信及ref的用法 react的介绍 声明式设计 −React采用声明范式，可以轻松描述应用。 高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。 灵活 −React可以与已知的库或框架很好地配合。 JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。 组件 − 通过 React 构建组件...
React组件通信-父子组件间的通信
m0_71485750的博客
09-15 1万+
将数组传递给子组件。
React 父子组件通信的实现方法
10-15
在React中，组件间的通信是...这种设计有助于保持组件的独立性和可重用性，是React组件化开发的核心之一。在实际应用中，除了直接的props传递，还可以使用`context API`、`Redux`等工具来实现更复杂的跨层级组件通信。
关于react中组件通信的几种方式详解
08-28
React 组件通信方式详解 React 中组件通信是指在 React 应用程序中，不同的组件之间如何交换数据和协作的过程。 React 官方推荐使用单向数据流的方式来实现组件通信，即父组件向子组件传递数据，而子组件不能直接...
react开发教程之React 组件之间的通信方式
12-10
在React中，组件通信主要有以下几种方式： 1. **父子组件通信**：这是最基本的通信方式，通过props传递数据。父组件可以通过props向子组件传递数据，子组件则通过`this.props`来访问这些数据。在组件设计时，为了...
React 组件基本使用(三) ---父子组件之间的通信
try my best
09-26 876
React 组件基本使用(三) ---父子组件之间的通信 　　当有多个组件需要共享状态的时候，这就需要把状态放到这些组件共有的父组件中，相应地，这些组件就变成了子组件，从而涉及到父子组件之间的通信。父组件通过props 给子组件传递数据，子组件则是通过调用父组件传给它的函数给父组件传递数据。 　　很简单的一个例子，我们在输入框中输入温度，输入框下面显示冷和热。这里就有两
组件通信（$refs）
SnowLee
07-24 665
$ref 着重于索引，主要用来调用子组件里的属性和方法，其实并不擅长数据传递。而且ref用在dom元素的时候，能使到选择器的作用。 prop 着重于数据的传递，它并不能调用子组件里的属性和方法。 对于ref官方的解释是：ref 是被用来给元素或子组件注册引用信息的。引用信息将会注册在父组件的 $refs 对象上。 看不懂对吧？正常： 如果ref用在子组件上，指向的是组件实例，可以理解为对子组件的索引，通过$ref可能获取到在子组件里定义的属性和方法。 如果ref在普通的 DOM 元素上使用，引用指向的就.
# react中父子组件之间的通讯，一看就懂
社会人
10-22 1124
reacr中父子组件之间的通讯，一看就懂1.首先我们通过class的方式声明父组件PopularizeList 在上面用const声明一个子组件PopularSuccess 注：我一般喜欢用const来声明子组件，看个人习惯 在这里的你前提要了解props的作用，看看菜鸟教程一下知道，如果你还是不懂，记住用这个东西来像父组件中取值就行，就是这么简单粗暴。 下面来看找哥哥demo,impor
React中组件通信有哪些方式
htong521的博客
10-18 3913
React中组件通信有哪些方式
React 父组件调用子组件的方法---ref以及forwardRef 与 useImperativeHandle 详解
最新发布
m0_70605065的博客
03-22 2854
React 父组件调用子组件的方法---ref以及forwardRef 与 useImperativeHandle 详解
组件通信-ref链传输数据
weixin_45291595的博客
06-26 423
(通过ref链 实现子传父—>父传子) <div id="app"> <Father></Father> </div> <template id="father"> <!-- 组件中根元素必须唯一 --> <div> &...
react项目组件通信
情非得已小猿猿
03-03 705
父-子、子-父、跨组件通信
react-组件通信(redux)
软工二班秦同学的博客
10-07 216
react本身没有提供相关的仓库管理插件，react社区非常庞大，社区提供了一个仓库管理插件`redux`，相当于vuex可以对数据进行管理。
React(二) —— 组件间的通信方式
旺仔好吃糖的博客
02-17 1973
React中的状态提升概括来说，就是将多个组件需要共享的状态提升到它们最近的父组件上，在父组件上改变这个状态然后通过props分发给子组件。：以上方法实现了 可以通过被插槽的内容来直接操作父组件，以此给子组件传递数据（被插入的内容连同数据一起插入子组件中）兄弟组件AB，子组件A将值传给B组件，在子组件A中发布，在子组件B中订阅,，此方法适合任意关系的通信。🛫🛫🛫父组件中清除子组件的值：在子组件中定义修改state函数，父组件中调用此函数来实现。父组件的子组件标签中写入要插入到子组件的html标签。
React 父子组件通信的几种方法
热门推荐
火星基地
11-08 1万+
在 React 中，父子组件的通信是常见的问题，除了使用状态管理工具（如redux）以外，也可以实现父子组件的相互通信。 其中，父组件可以通过props、原型方法向子组件通信，子组件可以通过回调函数、事件冒泡向父组件通信。 1. 父组件向子组件通信 1. props 如下代码，name作为props由父组件传递给子组件，子组件拿到name后，渲染在页面上。 参数name由父组件传递给了子组件。 import { useState } from 'react'; const Son = ({ name })
react 兄弟组件通信
10-08
在 React 中，兄弟组件之间的通信可以通过共享一个父组件的状态来实现。以下是几种常见的兄弟组件通信方式： 1. 通过父组件传递 props：父组件可以将需要共享的数据作为 prop 传递给子组件，子组件通过 props 接收并使用该数据。 2. 使用全局状态管理库（如 Redux、Mobx）：通过将需要共享的数据保存在全局的状态管理库中，兄弟组件可以通过订阅和更新共享数据来进行通信。 3. 使用事件总线：事件总线是一个全局的事件发布-订阅机制，兄弟组件可以通过事件总线来发布和订阅事件，从而实现通信。 4. 使用 Context API：Context API 是 React 提供的一种跨层级传递数据的方式，父组件可以通过创建一个 Context，并将需要共享的数据传递给该 Context，然后兄弟组件可以通过 Context.Consumer 来获取数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值