Я пытаюсь решить сценарий, в котором родитель будет включать модуль, и при нажатии кнопки внутри родителя появится модуль.
Теперь в модуле будет кнопка закрытия, нажатие на которую скроет модуль. При следующем нажатии родительской кнопки модуль должен появиться снова и т. д.
Код пока:
var Parent = React.createClass({
getInitialState(){
return{
showModule: false
};
},
render(){
return(
<div className="parent" onClick={this._showModule}>
Click me to show module
<Module show={this.state.showModule}/>
</div>
);
},
_showModule(){
this.setState({
showModule: true
});
}
});
var Module = React.createClass({
getInitialState(){
return{
show: this.props.show
};
},
componentWillReceiveProps(nextProps){
console.log('componentWillReceiveProps is called');
this.setState({
show: nextProps.show
});
},
render(){
return(
(this.state.show?
<div className="module" onClick={this._hide}>
Click me and I will disappear myself
</div> : null
)
);
},
_hide(){
this.setState({
show: false
});
}
});
Проблема здесь в том, что всякий раз, когда я вызываю функцию скрытия в модуле (которая скрывает себя, изменяя state.show на false), вызывается componentWillReceiveProps.
Разве он не должен вызываться только тогда, когда Parent передает новые реквизиты? Как и почему изменение состояния в дочернем модуле вызывает componentWillReceiveProps?