AI 助理
备案控制台
开发者社区 云原生 文章 正文

React-58：Context（组件间进行通信）

2021-11-15 167
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： React-58：Context（组件间进行通信）

context的主要使用场景

  • 适用于下面的A组件和C组件或者A组件和D组件进行通信，至于A组件和B组件进行通信，可以使用props

image.png

Context使用步骤（下面的这个只适用于类式组件）

  1. 构造Context容器对象（这个对象要放在父子孙都能访问到的区域）

image.png

函数式组件和类式组件通用写法

image.png

文章标签：
容器
关键词：
React Native context
React Native通信
React Native组件通信
React Native context组件
react.js组件
答案命运
目录
相关文章
蒋星熠Jaxonic
|
3月前
|
缓存 前端开发 JavaScript
React Hooks深度解析与最佳实践：提升函数组件能力的终极指南
🌟蒋星熠Jaxonic，前端探索者。专注React Hooks深度实践，从原理到实战，分享状态管理、性能优化与自定义Hook精髓。助力开发者掌握函数组件的无限可能，共赴技术星辰大海！
蒋星熠Jaxonic
277 2
React Hooks深度解析与最佳实践：提升函数组件能力的终极指南
sunyalei
|
8月前
|
缓存 前端开发 数据安全/隐私保护
如何使用组合组件和高阶组件实现复杂的 React 应用程序？
如何使用组合组件和高阶组件实现复杂的 React 应用程序？
sunyalei
297 68
sunyalei
|
8月前
|
缓存 前端开发 Java
在 React 中，组合组件和高阶组件在性能方面有何区别？
在 React 中，组合组件和高阶组件在性能方面有何区别？
sunyalei
268 67
sunyalei
|
8月前
|
前端开发 JavaScript 安全
除了高阶组件和render props，还有哪些在 React 中实现代码复用的方法？
除了高阶组件和render props，还有哪些在 React 中实现代码复用的方法？
sunyalei
321 62
夏天49597
|
11月前
|
移动开发 前端开发 API
React 音频播放器组件 Audio Player
本文介绍如何使用React创建音频播放器组件，涵盖核心功能如播放/暂停、进度条、音量控制和时间显示。通过HTML5 `<audio>` 元素和React的声明式状态管理，实现交互式音频播放。常见问题包括控件不响应、进度条无法更新和音量控制失灵，并提供解决方案。此外，还讨论了浏览器兼容性、异步错误处理和性能优化等易错点及避免方法。
夏天49597
783 123
不穿大酷头
|
10月前
|
前端开发 JavaScript
除了使用Route组件，React Router还有其他方式处理404错误页面吗
除了使用Route组件，React Router还有其他方式处理404错误页面吗
不穿大酷头
278 58
不穿大酷头
|
10月前
|
前端开发
React 中高阶组件的原理是什么？
React 中高阶组件的原理是什么？
不穿大酷头
248 57
不穿大酷头
|
10月前
|
前端开发 开发者
除了函数组件和类组件，React 还有其他创建组件的方式吗？
除了函数组件和类组件，React 还有其他创建组件的方式吗？
不穿大酷头
196 57
不穿大酷头
|
10月前
|
前端开发
如何在React Router中定义404错误页面组件？
如何在React Router中定义404错误页面组件？
不穿大酷头
262 57
不穿大酷头
|
10月前
|
前端开发
在 React 中使用高阶组件时，如何避免命名冲突？
在 React 中使用高阶组件时，如何避免命名冲突？
不穿大酷头
249 56

热门文章

最新文章

  • 1
    React的路径别名
  • 2
    react hooks 使用小技巧—useState传值函数
  • 3
    部署React项目到云服务器(步骤清晰)
  • 4
    React 还是 Vue: 你应该选择哪一个Web前端框架？
  • 5
    React(0.13) 定义一个动态的组件(注释，样式)
  • 6
    Electron搭配React的history路由模式打包exe客户端
  • 7
    将 React 应用迁移至 Vite
  • 8
    Zustand：更强大的 React 状态管理库
  • 9
    React 官方发布 V16.6.0，新增支持 lazy，memo 和 contextType
  • 10
    好程序员Web前端教程之React原理解析及优化技巧
  • 1
    React 19 Actions：表单处理从未如此优雅
    344
  • 2
    React 18 流式渲染：解锁极致性能优化实践
    473
  • 3
    深入浅出React中的refs
    200
  • 4
    【CodeBuddy】挑战一句话开发一个完整项目之：React表单验证系统
    215
  • 5
    如何使用组合组件和高阶组件实现复杂的 React 应用程序？
    297
  • 6
    在 React 中，组合组件和高阶组件在性能方面有何区别？
    268
  • 7
    除了高阶组件和render props，还有哪些在 React 中实现代码复用的方法？
    321
  • 8
    掌握Multi-Agent实践(三)：ReAct Agent集成Bing和Google搜索功能，采用推理与执行交替策略，增强处理复杂任务能力
    532
  • 9
    使用 Node.js、Express 和 React 构建强大的 API
    354
  • 10
    Vue与React两大前端框架的主要差异点
    509

    • 相关课程

    更多
  • React 入门与实战
  • React 入门教程开发文档

    • 相关电子书

    更多
  • 利用编译将 Vue 组件转成 React 组件
  • React Native 全量化实践
  • React在大型后台管理项目中的工程实践
    • 下一篇
    基于Python+Vue开发的口腔牙科预约管理系统