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