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