React.js - 이벤트 처리기로 소유자 구성 요소의 상태 변경

Question

모델 변경 이벤트를 처리하는 올바른 방법입니까?

a. handleModelChange 함수는 onModelChange prop를 SubClass로 전달 중입니다.

b. 모델 변경 이벤트가 발생하면 다시 렌더링하기 위해 SubComponent의 핸들러가 MainComponent의 상태를 변경합니다.

var _SomeMixin={ 
    componentWillMount: function() { 
       this.props.options.model.on("MODEL_CHANGED", this.props.onModelChange); 
     }, 
     componentWillUnmount: function() { 
       this.props.options.model.off("MODEL_CHANGED", this.props.onModelChange); 
     }, 
    /* more mixin functions */ 
} 

var SubComponent = React.createClass({ 
      mixins: [_SomeMixin], 
      render: function() {      
       return (
        <div> 
        <!-- ... more elements .. > 
        </div> 
       ); 
      } 
     }); 


var MainComponent = React.createClass({ 
      getInitialState: function() { 
       return {MainComponentState: []}; 
      }, 
      handleModelChange: function() { 
       if (this.isMounted()) { 
        this.setState({MainClassState: this.props.options.model.toJSON()}); 
       } 
      }, 
      render: function() { 
       return (
        <SubClass options={this.props.options} onModelChange={this.handleModelChange} /> 
        ); 
      } 
     }); 

Answer 1

이것은 내부 구성 요소가 변경되었음을 부모 구성 요소에 알리는 방법 중 하나입니다. 그러나이 접근법은 당신을 콜백 지옥으로 인도 할 것이고, 당신은 매번 통과해야 할 것입니다.

더 나은 솔루션은 Moreartyjs

과 같은 상태 관리 라이브러리를 사용하는 것입니다.