React组件通信技巧
2023-09-27 14:28:55 时间
效果图
http://www.jianshu.com/p/8ed3a060f636
![](http://upload-images.jianshu.io/upload_images/1792932-d226ce508845ab48.gif?imageMogr2/auto-orient/strip)
communication.gif
点击查看Github完整源码
1.父向子通信
- 直接标签中插入参数即可
//number只是个例子
let _number = this.state.number
<Child number={_number} />
需要注意,_number 可以为普通参数、this.xxx 参数、也可以是 this.state.xxx 参数,其中this.state.xxx参数若发生改变,会导致 Child 重新渲染
2.子向父通信
- 需要从 Parent 处接一个绑定了父组件的函数,然后在 Child 内部调用修改父的相关参数,达到效果
//从父组件接函数
childToParent() {
let _backNumber = this.state.backNumber
this.setState({
backNumber: _backNumber + 1
})
}
let _childToParent = this.childToParent.bind(this)
<Brother childToParent={_childToParent} />
<div>{'子向父通信:' + _backNumber}</div>
//子组件触发函数
let _childToParent = this.childToParent.bind(this)
<button onClick={_childToParent}>子向父通信</button>
同样,可以修改父组件的 this.state.xxx( this.setState() 触发渲染),也可以修改this.xxx等值
3.通用组件通信方式(包括兄弟组件)
-
理论上,掌握了子向父通信与父向子通信,可以处理兄弟组件通信,但是如果层级过深,这种方式极度麻烦
-
建议使用 Event 对象处理嵌套层级过深的组件通信(当然包括兄弟组件通信)
//建议将Event相关单独封装模块使用
//event.js
export var events = {
ctc: 'ctc',
ctp: 'ctp',
ptc: 'ptc',
bts: 'bts',
stb: 'stb'
}
export var sendEvent = (eventName, params) => {
var event = new Event(eventName)
event.params = params
document.dispatchEvent(event)
}
export var catchEvent = (eventName, callback) => {
document.addEventListener(eventName, e => callback(e))
}
export var removeCatch = (eventName, callback) => {
document.removeEventListener(eventName, callback)
}
//brother.js 发送组件
import {events, sendEvent} from './event'
<button onClick={_brotherToSister}>Brother向Sister通信</button>
brotherToSister() {
let _obj = {
message: 'brother to sister'
}
sendEvent(events.bts, _obj)
}
//sister.js 接收组件
import {events, catchEvent} from './event'
constructor() {
super()
this.state = {
message: ''
}
//防止多次引用
this._brotherToSister = this.brotherToSister.bind(this)
}
componentDidMount() {
catchEvent(events.bts, this._brotherToSister)
//会造成多次引用
// catchEvent(events.bts, this.brotherToSister.bind(this))
}
componentWillUnmount() {
removeCatch(event.bts, this._brotherToSister)
}
brotherToSister(e) {
this.setState({
message: e.params.message
})
}
<div>
{'message: ' + _message}
</div>
点击查看Github完整源码
相关文章
- Yii2 组件
- SpringBoot2 整合Kafka组件,应用案例和流程详解
- vue/react框架中关于组件信息通信引发的面试题
- react 创建组件
- Vue - 实现用 JS 调用自定义组件 / 类似 ElementUI 弹框组件(在 js 文件中通过 this.xxx 方式调用并显示自定义弹框模态框组件)
- react学习笔记2--组件
- 你不知道的React Developer Tools,20 分钟带你掌握 9 个 React 组件调试技巧
- 一键跳转组件所在的文件与具体行数,提升排查效率,分享几个 React Developer Tools 使用小技巧
- 数字进度条组件NumberProgressBar
- vue异步按需加载组件
- Vue 3结合element plus(问题总结二)之 table组件实现多选和清除选中(在vue3中获取ref 的Dom)
- 开启云之旅:OpenStack组件简介
- SwiftUI 自定义组件大全之自带动画的 Fast Action Button 菜单
- Flutter 基础组件之 Text文本组件使用大全(教程含源码)
- React教程之 React 中的高阶组件 (HOC) 简介
- 微信小程序自定义组件
- React值组件的三大特性
- react路由、NavLink组件封装
- react兄弟组件通信之pubsub-js
- First Solar计划裁员近三成并停产Series 5光伏组件
- 如何在快应用中实现标签组件
- 小波说雨燕 第三季 构建 swift UI 之 UI组件集-视图集(五)Image View视图 学习笔记
- React函数式组件值之useRef()和useImperativeHandle()