1、PubSub使用方式

1.1 react匯入庫

npm install pubsub-js --save

1.2 react 頁面引入pubsubjs

1.3 pubsubjs使用

2、React例項使用監聽實現傳參

2.1 子頁面home.js使用PubSub.publish傳送state

import React, { Component } from 'react';
import PubSub from 'pubsub-js';
class Home extends Component {
  constructor(props){
    super(props);
    this.state={
      increase:'increase',
      decrease:'decrease'
    }
  }
  buttonIncrease(){
    PubSub.publish('PubSubmessag',this.state.increase);
  }
  buttonDecrease(){
     PubSub.publish('PubSubmessage', this.state.decrease);
  }
  render() {
    return (
      <div>
        Some state changes:
        <button onClick={this.buttonIncrease.bind(this)}>Increase</button>
        <button onClick={this.buttonDecrease.bind(this)}>Decrease</button>
      </div>
    )
  }
}
export default Home;
 

2.2 父頁面App.js接收使用PubSub.subscribe訂閱指定訊息，PubSub.unsubscribe取消訂閱訊息

import React, { Component } from 'react';
import { Link} from 'react-router-dom';
import PubSub from 'pubsub-js';

export default class App extends Component{
constructor(props){
  super(props);
  this.state={
    increase:'none',
  }
}
componentDidMount(){
  this.pubsub_token = PubSub.subscribe('PubSubmessage', function (topic,message) {
    this.setState({
      increase: message
    });
  }.bind(this));
}
componentWillUnmount(){
  PubSub.unsubscribe(this.pubsub_token);
}
  render() {
  return (
    <div>
      <header>
        Links:     
        <Link to="/App/home">Home</Link>   
      </header> 
      <div style={{ marginTop: '1.5em' }}>{ this.props.children}</div>
      <div style={{ marginTop: '1.5em' }}>{ this.state.increase}</div>
    </div>
  )
}
}
 

當在子頁面單擊increase、decrease按鈕，會發送不同的訊息給父頁面，父頁面收到訊息，利用this.state.increase進行呈現，此時你會發現它是實時變化的，因為它會實時監聽子元件傳送的訊息。

PS：React-Router4.0建立子父元件關係

import React, { Component } from 'react';
import {BrowserRouter } from 'react-router-dom';
import { Router, Route, } from 'react-router'

import  App from '../components/App.js'
import  Home from '../components/Home.js'

export default class RouterIndex extends Component {
  render() {
    return ( 
          <BrowserRouter>
            <App path="/App" component={App}>
              <Route path="/App/home" component={Home} />
            </App>
          </BrowserRouter>
    )
  }
}