React.js-通過事件處理程序更改所有者組件的狀態

Question

這是處理模型更改事件的正確方法嗎？

一種。 handleModelChange函數作為onModelChange屬性傳遞給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之類的狀態管理庫