組件 change tails boa 訂閱 button 消息 href turn

1、PubSub使用方式

1.1 react導入庫

npm install pubsub-js --save

1.2 react 頁面引入pubsubjs

import PubSub from ‘pubsub-js‘

1.3 pubsubjs使用

發送消息：PubSub.publish(名稱,參數) 訂閱消息：PubSub.subscrib(名稱,函數) 取消訂閱：PubSub.unsubscrib(名稱) PS:pubsubjs源碼及使用詳情https://github.com/mroderick/PubSubJS

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

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

[javascript] view plain copy

1. import React, { Component } from ‘react‘;
2. import PubSub from ‘pubsub-js‘;
3. class Home extends Component {
4. constructor(props){
5. super(props);
6. this.state={
7. increase:‘increase‘,
8. decrease:‘decrease‘
9. }
10. }
11. buttonIncrease(){
12. PubSub.publish(‘PubSubmessag‘,this.state.increase);
13. }
14. buttonDecrease(){
15. PubSub.publish(‘PubSubmessage‘, this.state.decrease);
16. }
17. render() {
18. return (
19. <div>
20. Some state changes:
21. <button onClick={this.buttonIncrease.bind(this)}>Increase</button>
22. <button onClick={this.buttonDecrease.bind(this)}>Decrease</button>
23. </div>
24. )
25. }
26. }
27. export default Home;

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

[javascript] view plain copy

1. import React, { Component } from ‘react‘;
2. import { Link} from ‘react-router-dom‘;
3. import PubSub from ‘pubsub-js‘;
5. export default class App extends Component{
6. constructor(props){
7. super(props);
8. this.state={
9. increase:‘none‘,
10. }
11. }
12. componentDidMount(){
13. this.pubsub_token = PubSub.subscribe(‘PubSubmessage‘, function (topic,message) {
14. this.setState({
15. increase: message
16. });
17. }.bind(this));
18. }
19. componentWillUnmount(){
20. PubSub.unsubscribe(this.pubsub_token);
21. }
22. render() {
23. return (
24. <div>
25. <header>
26. Links:
27. <Link to="/App/home">Home</Link>
28. </header>
29. <div style={{ marginTop: ‘1.5em‘ }}>{ this.props.children}</div>
30. <div style={{ marginTop: ‘1.5em‘ }}>{ this.state.increase}</div>
31. </div>
32. )
33. }
34. }

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

PS：React-Router4.0建立子父組件關系

子父組件關系建立是依靠React-Router4.0來建立的，附上子父組件關系的源碼，若對RR4.0不太了解，可參考http://blog.csdn.net/zfan520/article/details/78563034 [javascript] view plain copy

1. import React, { Component } from ‘react‘;
2. import {BrowserRouter } from ‘react-router-dom‘;
3. import { Router, Route, } from ‘react-router‘
5. import App from ‘../components/App.js‘
6. import Home from ‘../components/Home.js‘
8. export default class RouterIndex extends Component {
9. render() {
10. return (
11. <BrowserRouter>
12. <App path="/App" component={App}>
13. <Route path="/App/home" component={Home} />
14. </App>
15. </BrowserRouter>
16. )
17. }
18. }

react使用pubsub事件訂閱，組件間通信