时间戳

首页 > 解决方案 > 在 React 和 setState 中有条件地渲染组件/元素时出现问题

javascript - 在 React 和 setState 中有条件地渲染组件/元素时出现问题

问题描述

我有一个反应登录/注册表单，当您登陆页面时，您位于注册部分，我需要在单击登录时显示登录部分，并显示产品，就像您从其中任何一个单击开始时一​​样注册或登录组件，注册部分消失。注册和登录实际上应该是相同的，只是不同的输入并显示在同一个空间中。

我的问题是我的注册和入门部分显示并正常运行，但似乎无法弄清楚如何正确设置用户单击登录按钮并让它切换以显示该组件而不是注册时的状态。

我相信我的部分问题在于此声明：

render() {
    const { requestedPostsThatWeGotFromGecko } = this.state;
    const { loginStatus } = this.state;
    return (
       <div className="gecko">
        {requestedPostsThatWeGotFromGecko ? (
          <Cards />
        ) : loginStatus ? (
            <Login signup={() => this.clickMe()} />
        ) : (
          <SignUp login={() => this.clickMe()} />
        )
        }
      </div> 
    );
  }

Gecko 是我的主要应用程序结构，其中大部分都包含在其中，注册、登录和卡片是我的其他组件。

注册组件

import React from 'react';
import Login from '../LogIn';
//import CoolTabs from 'react-cool-tabs';



export default class SignUp extends React.Component {

    render() {
        const onClick = () => {
            this.props.login();
            console.log('rich');
        }
        return (
            <div className='sign-up'>
                <table className='sign-up-form'>
                    <tbody>
                    <div class="gecko-signup__tabs"><button id="gecko-signup" data-selected="yes">Sign Up</button>
                    <button id="gecko-login" data-selected=""onClick={this.setState.loginClose}>Log In</button></div>
            ...
                            <td colSpan="2"><input id="getStarted" type="submit" value="Get Started" onClick={onClick}/></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        );
    }
}

登录组件

import React from 'react';
import SignUp from '../SignUp';


export default class Login extends React.Component {

    render() {
        const onClick = () => {
            this.props.signup();
            console.log('rich');
        }
        return (
             <div className='login'>
                 <div className="login" ref={el => (this.div = el)}></div>
                 <table className='sign-up-form'>
                    <tbody>
                        <div class="gecko-signup__tabs">    
                            <input id="gecko-signup" value="Sign Up" onClick={SignUp} />
                            <input id="gecko-login" value="Log In" onClick="" />
                        </div>
                        <tr>
                            <td>
                                <p id="signUpFree">Welcome Back</p>
                            </td>
                        </tr>
                        <div id="inputs-section">
                        
                        <div class="field-wrap">
                            <label>Email Address<span class="req">*</span></label>
                                <input type="email"required autocomplete="off"/>
                        </div>
                        <div class="field-wrap">
                               <label>Password<span class="req">*</span></label>
                                    <input type="password"required autocomplete="off"/>
                        </div>
                        <tr>
                            <td colSpan="2"><input id="getStarted" type="submit" value="Log Me In" onClick={onClick}/></td>
                        </tr>
                        </div>
                </tbody>
            </table>
        </div>
    );  
    }
}

有没有一种简单的方法可以根据默认值在这三个之间交替，或者按下什么按钮？我查看了 react-router-dom，但发现自己已经将很多功能分开了。

标签： javascriptreactjsdomreact-routerconditional-statements

解决方案

  1. 你可以state在你的 React 组件中添加 auth 类型。
  2. 根据用户点击的内容，更新 React 状态。
  3. 知道组件对应的状态。
this.state = {
 authType: "signup"
}

render() {
  if (authType === "signup") return <Signup />
  if (authType === "login") return <Login />
}

或更好，

您可以使用不同的路由进行登录和注册，使用react-router. 并以不同的方式展示它们。

推荐阅读