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