ReactJS：在状态更改时调用 componentWillReceiveProps？

Question

我正在尝试解决一个场景，父级包含一个模块，当在父级中单击一个按钮时，模块将出现。

现在Module中会有一个关闭按钮，点击可以隐藏Module。下次单击父按钮时，模块应该再次出现，依此类推。

到目前为止的代码：

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
    });  
  }
});

这里的问题是，每当我调用 Module 中的 hide 函数（通过将 state.show 更改为 false 来隐藏自身）时，都会调用 componentWillReceiveProps。

不应该只在Parent传递新props的时候才调用吗？子模块中的状态更改如何以及为什么会调用 componentWillReceiveProps？

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

Answer 1

当您单击 "Click me and I will disappear myself" 时，您实际上单击了父对象并调用了 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

ReactJS：在状态更改时调用 componentWillReceiveProps？

ReactJS: componentWillReceiveProps is called on state change?

javascript

reactjs

react-jsx