使用mobx

src/UI/Components/Command.tsx

@@ -1,3 +1,4 @@
+import { inject, observer } from 'mobx-react';
 import * as React from 'react';
 import { CSSProperties } from 'react';
 
@@ -5,6 +6,9 @@ import { CommandStore } from '../Store/CommandStore';
 import { CommandLineContainer } from './CommandLineContainer';
 import { InputHint } from './commandLineInput/InputHint';
 
+
+@inject("commandStore")
+@observer
 export class CommandComponent extends React.Component<{ commandStore?: CommandStore }, null>
 {
     style: CSSProperties = {

src/UI/Components/CommandLineContainer.tsx

@@ -1,8 +1,11 @@
+import { inject, observer } from 'mobx-react';
 import * as React from 'react';
 
 import { CommandStore } from '../Store/CommandStore';
 import { CommandLine } from './CommandLine';
 
+@inject("commandStore")
+@observer
 export class CommandLineContainer extends React.Component<{ commandStore?: CommandStore }, null>
 {
 

src/UI/Components/Panel.tsx

@@ -1,3 +1,4 @@
+import { inject, observer } from 'mobx-react';
 import * as React from 'react';
 
 import { DownPanelStore } from '../Store/DownPanelStore';
@@ -20,6 +21,8 @@ export class TopPanel extends React.Component<{}, {}>
     }
 }
 
+@inject("store")
+@observer
 export class DownPanel extends React.Component<{ store?: DownPanelStore }, {}>
 {
     render()

src/UI/Store/CommandStore.ts

@@ -1,3 +1,5 @@
+import { observable } from 'mobx';
+
 import { KeyWord } from '../../Common/InputState';
 import { commandMachine } from '../../Editor/CommandMachine';
 import { Editor } from '../../Editor/Editor';
@@ -18,9 +20,9 @@ export class CommandStore
     private m_promptKeyIndex: number = 0;
 
     //命令执行中
-    isCmdIng: boolean;
+    @observable isCmdIng: boolean;
     //历史的消息列表
-    promptList: Array<CommandMsg> = [];
+    @observable promptList: Array<CommandMsg> = [];
     //提示字符串
     commandPrompt: string = '';
     //关键字列表