按状态切换子组件答案

【问题标题】：Switch child components by state按状态切换子组件
【发布时间】：2020-07-28 11:58:33
【问题描述】：

我有一个父组件：

import React, { Component, Fragment } from "react";

class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      SignUpClicked: null
    };
    this.openSignUp = this.openSignUp.bind(this)
  }


  openSignUp() {
    this.setState({
      SignUpClicked: true
    })
    console.log('signup clicked')
  }

  render() {
      return (
      <div> 
        <SignUp
        authState={this.props.authState}
        onStateChange={this.props.onStateChange}
        openSignUp = {this.openSignUp} />
        <SignIn
        authState={this.props.authState}
        onStateChange={this.props.onStateChange} />
      </div>)
      }
    }

export default Parent;

然后是不同文件中的两个子组件 SignUp 和 SignIn。

在每个链接中都有一个类似<p>Sign Up Instead?<a href="#" onClick = {this.props.openSignUp}> Sign Up </a></p> 的链接，以及用于登录的另一种方式。

但是，我无法让他们在两个组件之间切换 - 我在这里做错了什么？

【问题讨论】：

最好的办法是给组件分配两条路由，点击切换链接改变路由路径。

标签： javascript reactjs

【解决方案1】：

您可以通过设置条件来轻松控制应该渲染哪个组件。如果this.props.authState 为真，则显示 SignUp 组件，否则显示 SignIn 组件

 <div> 
        {!this.props.authState && (<SignUp
        authState={this.props.authState}
        onStateChange={this.props.onStateChange}
        openSignUp = {this.openSignUp} />) }
        {this.props.authState && (<SignIn
        authState={this.props.authState}
        onStateChange={this.props.onStateChange} />)}
 </div>

【讨论】：

【解决方案2】：

您可以使用一个名为conditional rendering 的概念来解决您的问题。只需输入conditional rendering，您仅在满足条件时才显示组件。对于您的情况，您可以尝试以下方法。

import React, { Component, Fragment } from "react";

class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      SignUpClicked: false
    };
  
  }

//changed this to arrow function that binds "this" automatically
  toggleSignUp = () => {
    this.setState({
      SignUpClicked: !this.state.SignUpClicked
    })
    console.log('signup clicked')
  }

  render() {
      return (
      <div> 
       { this.state.SignUpClicked && 
       <SignUp
        authState={this.props.authState}
        onStateChange={this.props.onStateChange}
        openSignIn = {this.toggleSignUp} />
        }
        
        {!this.state.SignUpClicked &&
        <SignIn
        authState={this.props.authState}
        onStateChange={this.props.onStateChange} 
        openSignUp = {this.toggleSignUp} />
        />
        }
      </div>
      )}
    }

export default Parent;

注意：注意我所做的更改

通过使用它们将函数更改为arrow function，您不必在constructor 中绑定this。它会自动为您执行此操作。
我已将函数 openSignUp 的名称更改为 toggleSignUp，因为我们将使用单个函数来显示注册组件，而不是根据需要隐藏它。（因为我假设您将在 <SignUp/> 组件中实现“登录”以返回登录
我已将相同的 toggleSignUp 函数引用传递给这两个组件，以便您可以显示或隐藏其中任何一个。

【讨论】：

【解决方案3】：

这样做

import React, { Component, Fragment } from "react";

class Parent extends Component {
  constructor(props) {
    super(props);

    // Set state of the component
    this.state = {
      // Show sign in page by default
      show: "signin"
    };
  }


  showSignup = () => {
    // Show sign up page by changing the show variable
    this.setState({
      show: "signup"
    });

    console.log('Showing Signup Page');
  }

  showSignin = () => {
    // Show sign in page by changing the show variable
    this.setState({
      show: "signin"
    });

    console.log('Showing Signin Page');
  }

  render() {
      // Render the component as per show state variable
      if(this.state.show === "signin") {
          return <SignIn 
                     authState={this.props.authState} 
                     onStateChange={this.props.onStateChange} 
                     onSignup={this.showSignup} 
          />
      }
      else {
          return <SignUp
                     authState={this.props.authState} 
                     onSignup={this.showSignin} 
          />

      }
  }

export default Parent;

所以基本上，从两个子组件中导出 onClick 事件并在父组件中设置显示状态变量。然后根据状态，只返回你想要的组件。

如果有任何问题或困惑，请告诉我。很想回答。

【讨论】：