over 3 years ago

一般 Component 之間的 event 或 資料會藉由 props 來做傳遞
例如

<UserDetail ref="addUserDetail" actions={this.props.actions} reload={this._reload} />

但如果 Component 之間的階層太過複雜
往往會造成 props 亂飛的窘境

這時需使用事件監聽的模式來控管 Component 之前的 event

此範例使用 PubSubJS 來訂閱一個監聽的 event 給各個子 Component 使用

請先

npm install pubsub-js

使用範例

import React, {Component} from 'react';
import pubsub from 'pubsub-js';

class Main extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
            <ProductSelection />
            <Product name="product 1" />
            <Product name="product 2" />
            <Product name="product 3" />
            </div>
        );
    }
}

class ProductSelection extends Component {
  constructor(props) {
      super(props);
      this.state = {
        selection: 'none'
      }
  }
  componentDidMount() {
    // 訂閱一個監聽事件來 set State
    this.pubsub_token = pubsub.subscribe('products', function(topic, product) {
      this.setState({ selection: product });
    }.bind(this));
  }
  componentWillUnmount() {
    // 使用 subscribe 產生的 this.pubsub_token 來取消 監聽事件
    pubsub.unsubscribe(this.pubsub_token);
  }
  render() {
    return (<div>You have selected the product : {this.state.selection}</div>);
  }
}

class Product extends Component {
  constructor(props) {
      super(props);
      this.onclick = this.onclick.bind(this);
  }
  onclick() {
    // 呼叫 'products' 監聽事件
    pubsub.publish('products', this.props.name);
  }
  render() {
    return(
      <div onClick={this.onclick}>{this.props.name}</div>
    );
  }
}

export default Main;

當 Product 執行 onclick() 時會觸發 ProductSelection 內所訂閱的 products 事件
來改變 ProductSelection 的 selection 狀態

更進階的用法可參考 PubSubJS

參考來源
https://ctheu.com/2015/02/12/how-to-communicate-between-react-components/

← 使用 react-i18next 建立多語系 簡單介紹 react-motion 的 Motion Component →
 
comments powered by Disqus