Question

在我的主页中，我有一个用于存储注册和登录按钮的组件。

Homepage.js

state = {
    triggerSignInComponent: false
}

render() {
   return {
    this.state.triggerButtons ? 
      <div>
        <Link to='/register'>
          <button>Register</button>
        <Link/>

        <button onClick={this.toggleSignInHandler}>Sign In</button>
      </div> : null
   }
}

如果用户单击“登录”，则该组件将调用“登录”组件。
如果用户单击注册，他们将被重定向到注册组件。但是，如果他们改变主意，则可以使用“登录”按钮将用户重定向到首页，并切换“登录”组件。

Register.js

signInHandler = () => {
    this.props.history.push({
        pathname:'/',
        state: {
            triggerSignInComponent: true
        }
    });
}

<button onClick={this.onSubmitHandler}>Register</button> 

<button onClick={this.signInHandler}>Sign In</button>

我希望用户一切换signInHandler就显示登录组件。如果将用户重定向到首页以进行登录，该如何更改首页的状态？我已经在 Homepage.js 中尝试了以下操作：

componentWillMount = () => {
    if(this.props.location.state.triggerSignInComponent) {
        this.setState({
            triggerSignInComponent: true
        })
    }
}

但是，由于首次调用该组件时prop是undefined，因此无法使用。

Answer 1

尝试将this.props.location.state.triggerSignInComponent更改为 this.props.location.triggerSignInComponent

componentWillMount = () => {
    if(this.props.location.triggerSignInComponent) {
        this.setState({
            triggerSignInComponent: true
        })
    }
}

如何访问componentWillMount中的历史道具？

1 个答案: