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> 
    } 
}