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

Question

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

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

код до сих пор:

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 ложь), componentWillReceiveProps вызывается.

Не следует ли его вызывать только в том случае, если родитель пропускает новые реквизиты? Как и почему было бы изменение состояния дочернего модуля invoke componentWillReceiveProps?

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

Answer 1

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

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

в

<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