React组件之间如何通信?

简介: React组件之间如何通信?

父组件向子组件传递:

父组件在调用子组件的时候,在子组件标签内传递参数,子组件通过props属性就能接收父组件传递过来的参数

子组件向父组件传递:

父组件向子组件传一个函数,然后通过这个函数的回调,拿到子组件传过来的值

兄弟组件之间的通信:

父组件作为中间层来实现数据的互通,通过使用父组件传递

父组件向后代组件传递:

使用context提供了组件之间通讯的一种方式,可以共享数据,其他数据都能读取对应的数据

通过使用React.createContext创建一个context;

context创建成功后,其下存在Provider组件用于创建数据源,Consumer组件用于接收数据

Provider组件通过value属性用于给后代组件传递数据

如果想要获取Provider传递的数据,可以通过Consumer组件或者或者使用contextType属性接收

非关系组件传递:

将数据进行一个全局资源管理,从而实现通信

相关文章
|
1月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
47 0
|
26天前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
24 0
|
21天前
|
前端开发 应用服务中间件 数据库
react服务端组件
react服务端组件
9 0
|
23天前
|
前端开发 JavaScript
快速上手React:从概述到组件与事件处理
快速上手React:从概述到组件与事件处理
|
26天前
|
前端开发 JavaScript API
React组件生命周期
React组件生命周期
63 1
|
26天前
|
资源调度 前端开发 JavaScript
React组件
React组件
37 0
|
30天前
|
存储 前端开发 JavaScript
探索 React Hooks 的世界:如何构建出色的组件(下)
探索 React Hooks 的世界:如何构建出色的组件(下)
探索 React Hooks 的世界:如何构建出色的组件(下)
|
30天前
|
缓存 前端开发 API
探索 React Hooks 的世界:如何构建出色的组件(上)
探索 React Hooks 的世界:如何构建出色的组件(上)
探索 React Hooks 的世界:如何构建出色的组件(上)
|
1月前
|
存储 前端开发 JavaScript
React组件中如何通讯
React组件中如何通讯
11 0
|
1月前
|
前端开发
react 使用 antd-mobile组件库实现下滑加载数据
react 使用 antd-mobile组件库实现下滑加载数据

相关产品

  • 云迁移中心