React组件间传值的方法有哪些？

[问答题]

React组件间传值的方法有哪些？

查看答案及解析

牛客919075960号

父子通信，父组件通过props将数据和改变父组件数据的方法传递给子组件，子组件子组件通过调用父组件的方法来修改数据。如果是类组件父组件可以通过ref获取到子组件的实例用来修改数据。跨级组件可以用过context进行传递数据。首先通过createContext方法创建一个context，在父组件中通过用context.provider包裹子组件，通过value属性传递数据，在子组件通过contextType或者consumer获取传递过来的数据。如果是hook则使用useContext函数接收context作为参数获取结果。在相关组件时可以通过redux进行组件组件之间的通信。

发表于 2022-08-04 17:21:35 回复(0)

重生之我是米黑子

props：适用于父子组件的通信，props以单向数据流的形式可以很好的完成父子组件的通信
React Context：适用于父子组件以及隔代组件通信，React Context提供了一个无需为每层组件手动添加props就能在组件树间进行数据传递的方法。
Refs：适用于父子组件的通信，Refs提供了一种方式，允许我们访问DOM节点或在render方法中创建的React元素
EventBus：可以适用于任何情况的组件通信，在项目规模不大的情况下，完全可以使用中央事件总线EventBus 的方式，EventBus可以比较完美地解决包括父子组件、兄弟组件、隔代组件之间通信，实际上就是一个观察者模式
Redux：同样可以适用于任何情况的组件通信，Redux中提出了单一数据源Store用来存储状态数据，所有的组件都可以通过Action修改Store，也可以从Store中获取最新状态，使用了redux就可以解决多个组件的共享状态管理以及组件之间的通信问题。

发表于 2023-01-08 20:45:58 回复(0)

蓝莓LanM

父传子：使用属性props 子传父：使用方法调用非相关组件之间传参：使用context上下文或者redux

发表于 2022-06-28 13:53:07 回复(0)

威猛的无尾熊最喜欢秋天

1、Ref 2、props 3、context上下文 4、redux

发表于 2024-02-22 16:40:32 回复(0)

牛客977739616号

react 传值方式父子通信，父在子组件传值，子组件通过props获取，子传父，父自定义事件，将事件传给子组件，子组件获取事件，并传递值给父组件，父组件通过事件参数接收值，并对值进行修改。可以使用状态管理工具就行传递，分为context和mobx, 类组件通过React.crateContext()来进行操作，将引入的子组件用包裹起来，子组件中把结构用包裹起来，或者加入一个静态资源属性，static contextType = context 通过this.context去获取数据，函数组件通过 const value = useContext(context)去获取

发表于 2023-03-22 10:22:54 回复(0)

说等下个版本吧的小鲸鱼很安静

父传子使用props；子传父调用使用方法；非相关组件之间使用context上下文或者时redux

发表于 2023-02-23 10:54:11 回复(0)

牛客52893446号

要什么丢什么要数据丢数据要在里面修改数据丢个修改数据的句柄 content ref

发表于 2022-11-01 10:50:56 回复(0)

❀❀❀❀❀❀❀❀❀❀❀❀

mark

发表于 2022-09-05 21:07:17 回复(0)

提交观点

问题信息

React

上传者：real19931

难度：

8条回答 23收藏 946浏览

React组件间传值的方法有哪些？

问题信息

热门推荐

相关试题