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