ReactJS: componentWillReceiveProps вызывается при изменении состояния?

Я пытаюсь решить сценарий, в котором родитель будет включать модуль, и при нажатии кнопки внутри родителя появится модуль.

Теперь в модуле будет кнопка закрытия, нажатие на которую скроет модуль. При следующем нажатии родительской кнопки модуль должен появиться снова и т. д.

Код пока:

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?

JsBin http://jsbin.com/cunuci/edit?js,console,output


person Ivin Jose    schedule 19.07.2015    source источник


Ответы (1)


Когда вы нажимаете «Нажмите на меня, и я исчезну сам», вы на самом деле нажимаете на Родителя и вызываете обработчик Parent._showModule. Сдача

<div className="parent" onClick={this._showModule}>
  Click me to show module
  <Module show={this.state.showModule}/>
</div>

to

<div className="parent">
   <p onClick={this._showModule}>Click me to show module</p>
   <Module show={this.state.showModule}/>
</div>

http://jsbin.com/naloxafile/1/edit?js,console,output

person monkey    schedule 19.07.2015