mobx + react + uiコンポーネントの操作方法を教えてください。

Question

以下のコードでuiコンポーネントを使用しているプロジェクトでは、疑似時計の形式で表現されています。
実際には外部ライブラリであるコードクロックを変更せずにこのコードを動作させる方法。

そして、決定がmobxの精神にあった最も重要なこと。

class ClockStore { 
    @observable data = [ 
     {id: "hour", value: "00"}, 
     {id: "min", value: "00"}, 
     {id: "second", value: "00"}, 
    ]; 

    @action 
    update(id, value){ 
     this.data.find(item => item.id === id).value = value; 
    } 
} 

let clockStore = new ClockStore(); 



@inject('clockStore') 
@observer 
class App extends Component<any, any> { 
    render(){ 
     return <Clock data={this.props.clockStore.data}></Clock> 
    } 
} 

// it's not my clock this component is taken from github 
class Clock extends Component<any, any> { 
    render(){ 
     return (
      <div> 
       <ClockFace data={this.props.data} /> 
       <div className="clock-control"></div> 
      </div> 
     ) 
    } 
} 

class ClockFace extends Component<any, any> { 
    render(){ 
     return (
      <div className="clock-face"> 
       {this.props.data.map((item, index) => <ClockSection key={ index }>{ item.value }</ClockSection>)} 
      </div> 
     ) 
    } 
} 
class ClockSection extends Component<any, any> { 
    render(){ 
     return (
      <span className="clock-section">{ this.props.children }</span> 
     ) 
    } 
} 

let stores = { clockStore }; 

ReactDOM.render(
    <Provider {...stores}> 
     <App /> 
    </Provider>, 
    document.querySelector('main') 
); 

// the code that sets the clock 
let count = 0; 
document.addEventListener('click',() => clockStore.update('hour', count ++)); 
// -------------------------- 

Answer 1

@inject('clockStore') 
@observer 
class App extends Component<any, any> { 
    render(){ 
     return <Clock data={ mobx.toJS(this.props.clockStore.data } }></Clock> 
    } 
} 

または

class ClockStore { 
    @observable data = [ 
     {id: "hour", value: "00"}, 
     {id: "min", value: "00"}, 
     {id: "second", value: "00"}, 
    ]; 

    getData(){ 
     return toJS(this.data); 
    } 

    @action 
    update(id, value){ 
     this.data.find(item => item.id === id).value = value; 
    } 
} 
@inject('clockStore') 
@observer 
class App extends Component<any, any> { 
    render(){ 
     console.log('app'); 


     return <Clock data={this.props.clockStore.getData()}></Clock> 
    } 
}