重构代码

src/components/ElementGroup.js

@@ -8,16 +8,20 @@ import { observer } from 'mobx-react'
 @observer
 export default class ElementGroup extends React.Component {
   cloneElement(element) {
-    this.props.ElementGroupStore.cloneElement(element)
+    this.store().cloneElement(element)
   }
 
   deleteElement(element) {
-    this.props.ElementGroupStore.deleteElement(element)
+    this.store().deleteElement(element)
   }
 
   // 返回element的index为-1, 删除最后一个元素
   deleteLastElement() {
-    this.props.ElementGroupStore.deleteLastElement()
+    this.store().deleteLastElement()
+  }
+
+  store() {
+    return this.props.ElementGroupStore
   }
 
   sidebar() {
@@ -27,13 +31,19 @@ export default class ElementGroup extends React.Component {
   render() {
     return (
       <div>
-        {
-          this.props.ElementGroupStore.elements.map(function(element) {
-            return (
-              <Element meta_element={ element } key={ "key_" + element.id } id={ element.id } name={ element.name } initialPos={ element.initialPos } target_type={ element.target_type } handleCloneElement={ this.cloneElement } handleDeleteElement={ this.deleteElement } handleDeleteLastElement={ this.deleteLastElement } />
-            )
-          }.bind(this))
-        }
+        {this.store().elements.map(element =>
+          (<Element
+            meta_element={ element }
+            key={ "key_" + element.id }
+            id={ element.id }
+            name={ element.name }
+            initialPos={ element.initialPos }
+            target_type={ element.target_type }
+            handleCloneElement={ this.cloneElement }
+            handleDeleteElement={ this.deleteElement }
+            handleDeleteLastElement={ this.deleteLastElement }
+          />)
+        )}
       </div>
     )
   }

src/components/Header.js

@@ -5,6 +5,10 @@ import { Link } from 'react-router-dom'
 import { observer } from 'mobx-react'
 import autobind from 'autobind-decorator'
 
+
+import ModalRepoFormModel from '../stores/ModalRepoFormStore'
+const ModalRepoFormStore = new ModalRepoFormModel()
+
 @autobind
 @observer
 export default class Header extends React.Component {
@@ -40,7 +44,7 @@ export default class Header extends React.Component {
 
     return (
       <div className="text-left top-header">
-        <ModalRepoForm handleNewRepo={ this.addRepo } />
+        <ModalRepoForm handleNewRepo={ this.addRepo } ModalRepoFormStore={ ModalRepoFormStore } />
         <div className='col-md-10'>
           { result }
         </div>

src/components/ModalRepoForm.js

@@ -3,8 +3,10 @@ import { Modal, Button } from 'react-bootstrap'
 import EventEmitter from '../libs/eventEmitter'
 import $ from 'jquery'
 import autobind from 'autobind-decorator'
+import { observer } from 'mobx-react'
 
 @autobind
+@observer
 export default class ModalRepoForm extends React.Component {
   constructor(props){
     super(props);

src/containers/Spd.js

@@ -3,12 +3,8 @@ import ElementGroup from '../components/ElementGroup'
 import Header from '../components/Header'
 import AlertContainer from 'react-alert'
 import EventEmitter from '../libs/eventEmitter'
-
-import headerModel from '../stores/HeaderStore'
-const headerStore = new headerModel()
-
-import ElementGroupModel from '../stores/ElementGroupStore'
-const ElementGroupStore = new ElementGroupModel()
+import headerStore from '../stores/HeaderStore'
+import ElementGroupStore from '../stores/ElementGroupStore'
 
 export default class Spd extends React.Component {
   componentDidMount() {

src/stores/ElementGroupStore.js

@@ -2,7 +2,7 @@ import { observable, useStrict, action } from 'mobx'
 
 useStrict(true)
 
-export default class headerStore {
+class ElementGroupStore {
   @observable elements = [
     { id: 1, name: "药库", initialPos: {x: 80, y: 70}, target_type: 'RegionalDesign::Repo' },
     { id: 2, name: "药架", initialPos: {x: 80, y: 70 + 60}, target_type: 'RegionalDesign::DrugRepo' },
@@ -21,3 +21,5 @@ export default class headerStore {
     this.elements.pop()
   }
 }
+
+export default new ElementGroupStore()

src/stores/HeaderStore.js

@@ -3,7 +3,7 @@ import $ from 'jquery'
 
 useStrict(true)
 
-export default class headerStore {
+class headerStore {
   @observable data = []
   @observable loading = true
   @observable error = null
@@ -28,3 +28,5 @@ export default class headerStore {
     })
   }
 }
+
+export default new headerStore()

src/stores/ModalRepoFormStore.js

+import { observable, useStrict, action } from 'mobx'
+
+useStrict(true)
+
+class ModalRepoFormStore {
+  @observable elements = [
+    { id: 1, name: "药库", initialPos: {x: 80, y: 70}, target_type: 'RegionalDesign::Repo' },
+    { id: 2, name: "药架", initialPos: {x: 80, y: 70 + 60}, target_type: 'RegionalDesign::DrugRepo' },
+    { id: 3, name: "药架格", initialPos: {x: 80, y: 70 + 60 * 2}, target_type: 'RegionalDesign::DrugBrandreth' }
+  ]
+
+  @action cloneElement(element) {
+    this.elements.push(element)
+  }
+
+  @action deleteElement(element) {
+    this.elements.remove(element)
+  }
+
+  @action deleteLastElement() {
+    this.elements.pop()
+  }
+}
+
+export default new ModalRepoFormStore()