《React-Native系列》30、 RN组件间通信
2023-09-27 14:29:03 时间
今天我们来说一说RN的组件之间的通信。
ReactNative的核心之一是他的组件化,组件化的核心是组件之间的通信。
组件是有层级来区分的,譬如:父组件 子组件。
我们先来讲解一个例子。
这个是我们要实现的功能,是一个表单的一部分,首先我们想到的是抽象组件。
组件有2种状态
- 选中状态,显示后面的课时
- 未选中状态,不显示后面的课时
组件的代码如下:
抽象出来的组件有一个状态机变量 choosed ,来控制是否有被选中,他的值是由外部props传入。
提供了一个onPress方法,控制选中状态的切换。其中这个方法是由props传递过来的。
定义了modifyChoosed方法来修改状态机变量choosed
好,组件封装完毕,那在表单页面我们怎么来使用这个组件呢。
1、import组件模块
2、使用组件
这里说明下
- 定义了CourseType组件的一个ref属性,ref="stu"
- 定义了title属性,
- 定义了choosed属性,他的值是由表单的type_stu状态机变量控制
- 定义了onPress方法,他的实现是:先获取choosed状态(取反),通过this.refs.stu.调用CourseType组件的modifyChoosed方法修改choosed状态,修改表单的type_stu状态机变量
好了,这样我们就实现了功能。
那我们总结下,这个是重点。
表单相当于父组件,CourseType相当于子组件。
子组件可以通过this.props 调用父组件的方法。
那父组件如何调用子组件的方法呢?
首先在子组件上定义一个ref=xxx,然后在父组件内通过this.refs.xxx.子组件Method()来调用。
相关文章
- Extjs4 自定义组件
- 030.Kubernetes核心组件-Scheduler
- 第一章 java nio三大组件与使用姿势
- react对antd中Select组件二次封装
- React Native新组件之SwipeableFlatList
- 基础组件-统一响应体封装
- 前端上传组件Plupload使用指南【转】
- antd中table组件中如何进行换行操作(react中)
- react-native 安卓手机Text组件文字显示不全问题
- 前端vue倒计时组件【模块化开发】
- COM组件简介
- Android下拉刷新、滚动到底部自动加载更多RecyclerView组件
- 基于webpack实现react组件的按需加载
- React源码分析(二)-组件的初始渲染
- React使用pubsub事件订阅,组件间通信
- React系列之高阶组件HOC实际应用指南
- React进阶之高阶组件
- 助你完全理解React高阶组件(Higher-Order Components)
- react-core-image-upload:轻量级的图片上传裁剪组件
- React Native - 实现高度自增长的 TextInput 组件
- React Native日历日程组件
- react-native-swipe-list-view侧滑删除组件使用
- React Native常用一些组件
- 《React-Native系列》15、 RN之可触摸组件
- 11 款 React Native 开源移动 UI 组件
- React-Native组件资源收集(江)
- Vue从入门到精通——第二章 Vue组件化编程