reactjs父子组件通信问题

Question

父组件Header调用子组件Login，传给子组件一个自己的this.state.A，
当子组件接受后，写入自己的state{A：this.props.A}，
当父组件的this.state.A改变时,子组件该如何更新自己的state。

父组件Header

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loginShow: false
    }
  }

  render() {
    return(
      <div>
        <Button onClick={this.loginHandler.bind(this) /}
        <Login loginShow={this.state.loginShow}></Login>
      </div>
    )
  }

  loginHandler() {
    this.setState({
      loginShow: true,
    })
    console.log("header: " + this.state.loginShow)
  }

}

子组件Login

class Login extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      loginShow: this.props.loginShow
    }
  }

  render() {
    console.log(this.state.loginShow)
    return(
      <div>
        {/*登录弹窗*/}
        {
          this.state.loginShow
          ?
          <div className="pop-wrapper pop-login">
            <div className="pop-top">
              <img className="pop-banner" src="http://oxwkidmsg.bkt.clouddn.com/pop-sign.png" alt="" />
              <i className="btn-close iconfont icon-close" onClick={this.closeHandler.bind(this)}/>
            </div>
            <div className="sign-form">
              <input type="text" placeholder="用户名／手机号" />
              <input type="text" placeholder="密码" />
            </div>
            <div className="btn-confirm">
              <button>登&nbsp;&nbsp;&nbsp;&nbsp;陆</button>
              <p><a id="login-sign" href="javascript:;">立即注册</a><a id="login-forget" href="javascript:;">忘记密码？</a></p>
            </div>
          </div>
          :''
        } 
        
      </div>
    )
  }



  closeHandler() {
    this.setState({
      maskShow: false,
      loginShow: false
    })
    console.log(this.state.maskShow)
  }
}

Answer 1

你这个想法也不是不可以，无非就是在componentWillReceiveProps的时候setState，不过不推荐

Answer 2

<Login loginShow={this.state.loginShow}></Login> 父子组件中传递使用的参数是props，你在子组件中使用this.props.loginShow就可以获取到父组件传下来的值了

Answer 3

既然父组件已经维护了状态，为什么子组件还要维护状态呢，子组件会修改状态？通过onChange回调给父组件去修改，所以只需要父组件维护状态就可以了。

Answer 4

以你的说法来分析，其实子组件这个状态不需要本身state维护啊，都用this.props.xxx 传进来的就行了。或者你一定要用子组件state维护 那就在钩子ComponentWillReceiveProps（）的时候接收一下。

Answer 5

基于发布订阅模式，React组件间通讯，不使用状态提升，不使用redux
https://github.com/sunluna/re...
https://github.com/sunluna/re...