React组件通信技巧

效果图

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完整源码