React组件通信技巧
效果图
![](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>