React组件通信技巧

效果图

http://www.jianshu.com/p/8ed3a060f636

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

 React