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