react使用pubsub事件订阅，组件间通信

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

当在子页面单击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‘
4. import  App from ‘../components/App.js‘
5. import  Home from ‘../components/Home.js‘
6. export default class RouterIndex extends Component {
7. render() {
8. return (
9. <BrowserRouter>
10. <App path="/App" component={App}>
11. <Route path="/App/home" component={Home} />
12. </App>
13. </BrowserRouter>
14. )
15. }
16. }

原文地址：https://www.cnblogs.com/lcosima/p/8626491.html