Spd.js

import React from 'react'
import ElementGroup from '../components/ElementGroup'
import Header from '../components/Header'
import AlertContainer from 'react-alert'
import EventEmitter from '../libs/eventEmitter'
import stores from '../stores'

export default class Spd extends React.Component {
  componentDidMount() {
    EventEmitter.subscribe('alert', function(info){
      this.showAlert(info)
    }.bind(this))
  }

  componentWillUnmount() {
    EventEmitter.unSubscribe('alert')
  }

  componentWillMount() {
    this.alertOptions = {
      offset: 14,
      position: 'top right',
      theme: 'dark',
      time: 5000,
      transition: 'scale'
    }
  }

  showAlert(info) {
    this.msg.show(info, {
      time: 2000,
      type: 'success',
      icon: <img src="/images/success.png" />
    })
  }

  render() {
    return (
      <div id="app">
        <AlertContainer ref={a => this.msg = a} {...this.alertOptions} />
        <div className="row">
          <Header headerStore={ stores.HeaderStore } />
        </div>
        <div className="row">
          <div className="col-md-2 sidebar" id='sidebar'>
            <h3 className='sidebar-header'>元件</h3>
            <ElementGroup elementGroupStore={ stores.ElementGroupStore } />
          </div>
          <div id="dropzone" className="col-md-10 dropzone">
            {this.props.children}
          </div>
        </div>
      </div>
    )
  }
}