Question

快速概念性问题。

假设我在页面上呈现注册组件。我有一个按钮，提示和登录。当我点击登录按钮时，我希望它替换注册组件而不必转到另一页。只是想知道，从概念上讲，我将如何实现onclick处理程序。我需要使用反应路由器吗？感谢

Answer 1

您可以使用三元语句有条件地渲染组件。

拳头在状态中声明某种变量以处理组件切换：

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

然后在按钮的点击处理程序中，您将处理此变量的切换：

onClick = event => {
   this.setState({login: !this.state.login})//sets it to opposite of previous value
}

然后在渲染中执行三元语句

render() {
    return(
       this.state.login ? //if login is true
          <SomeComponent
             onClick={this.onClick.bind(this)}
          />
       : //else
          <AnotherComponent
             onClick={this.onClick.bind(this)}
          />
    )
}

在这两个组件中，您都必须具有一个按钮：

<button onClick={this.props.onClick}>Switch Component</button>

Answer 2

我会使用react-router-dom链接：

import { Link } from 'react-router-dom';

和按钮看起来像这样：

<button component={Link} to="/yourpage">

Answer 3

使用路由器库是在组件之间导航的正确方法。由于您不想使用路由，因此可以尝试如下操作：

在您要用另一个屏幕替换“注册”屏幕的父组件中，维护状态变量以检查用户是否已登录。

constructor(props) { /* Parent Component Constructor */
   super(props);
   this.state = {
      isLoggedIn : false
   }
}

，父组件方法中的onLoginClick将是：

onLoginClick = () => {
 this.setState({ isLoggedIn : true })
}

当您在登录组件（子组件）中单击“登录”按钮时，此值将设置为true，onLoginClick方法将作为道具从父组件传递，即

<Button onClick={this.props.onLoginClick}>Login</Button>

现在像这样在父组件的渲染函数中使用此isLoggedIn状态变量：

render() {
    return(
      {!this.state.isLoggedIn &&
          <LoginComponent
             onClick={this.onLoginClick.bind(this)}
          />
       }
       {this.state.isLoggedIn &&
          <SecondComponent/>
       }
    )
}

ReactJS：单击按钮更改页面上的组件

3 个答案: