Question

所以我没有错误，我的所有其他组件都显示，除了我的SignUp组件。如果我故意在SignUp组件的jsx中创建一个错误，它会给我一个错误，让我相信该组件正在被渲染，但它只是没有显示在屏幕上。在ill下面提供SignUp.js文件，SignUp.css文件和App.js文件。谢谢你的帮助。

SignUp.js

import React, {Component} from 'react';
import '../stylesheets/SignUp.css';
import Auth from '../auth.js';
import NavBar from './NavBar.js';


const ENTER = 13;

var newAuth = new Auth();

class SignUp extends Component {

  _validatePassword=(password,passwordConfirm)=>{
    var lengthy = password.length < 6
    var samePassword = password !== passwordConfirm
    if(lengthy || samePassword){
      return false
      }
      else{
        return true
      }
    }
  _validateEmail=(email)=>{
    // var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    // return re.test(email)
  }
  _findError(email,password){
    return{
      email: email,
      password: password
    }
  }

  _handleSignup = () => {
    var user = {
      name:this.refs.fullname.value,
      email:this.refs.email.value,
      password:this.refs.password.value
    }
    if (user.name && user.email && user.password) {
      newAuth.signUp(user)
      .then(res => this.props.router.push('/login'))
      .catch(console.error);
    }
    else {
      this.setState({error: "Please fill in all fields"});
    }
  }




  _handleTyping = (e) => {
    if (this.state && this.state.error) {
      this.setState({ error: null })
    }
    if (e.keyCode===ENTER) {
      this._handleSignup()
    }
  }



  render(){
    return(

      <div className="signup">
       <NavBar/>
        <div className="group">
          <input className="page-input" type="text" ref="fullname"
            onKeyUp={this._handleTyping}
          />

          <span className="highlight"></span>
          <span className="bar"></span>
          <label className="modal-label">Full Name</label>
        </div>
        <div className="group">
          <input className="page-input" type="text" ref="email"
            onKeyUp={this._handleTyping}
          />
          <span className="highlight"></span>
          <span className="bar"></span>
          <label className="modal-label">Email</label>
        </div>
        <div className="group">
          <input className="page-input" type="password" ref="password"
            onKeyUp={this._handleTyping}
          />
          <span className="highlight"></span>
          <span className="bar"></span>
          <label className="modal-label">Password</label>


        </div>
        <div className="group">
          <input className="page-input" type="password" ref="passwordConfirm"
            onKeyUp={this._handleTyping}
          />
          <span className="highlight"></span>
          <span className="bar"></span>
          <label className="modal-label">Confirm Password</label>

          <button className="signup-btn" onClick={this._handleSignup}><span>Sign Up</span></button>

        </div>

       {this.state && this.state.error ?
          <p>{this.state.error}</p>
          : null
        }
      </div>

    )
  }
}
export default SignUp;

SignUp.css

.singup {
  display: flex;
  flex-direction: column;
  height: 350px;
  margin-top: 55px;
}


.page-input                 {
  font-size:18px;
  padding:10px 10px 10px 5px;
  display:block;
  width:190px;
  border:none;
  border-bottom:1px solid #757575;
}
.page-input:focus       { outline:none; }

.page-input:focus ~ label, .page-input:valid ~ label        {
  top:-20px;
  font-size:14px;
}

label                {
  transition:0.2s ease all;
  -moz-transition:0.2s ease all;
  -webkit-transition:0.2s ease all;
}

.bar    { position:relative; display:block; width:190px; }
.bar:before, .bar:after     {
  content:'';
  height:2px;
  width:0;
  bottom:1px;
  position:absolute;
  background:black;
  transition:0.2s ease all;
  -moz-transition:0.2s ease all;
  -webkit-transition:0.2s ease all;
}
.bar:before {
  left:50%;
}
.bar:after {
  right:50%;
}

.page-input:focus ~ .bar:before, .page-input:focus ~ .bar:after {
  width:50%;
}
.group{
  display: flex;
  flex-direction: column;
  align-items: center;

}
highlight {
  position:absolute;
  height:60%;
  width:200px;
  top:25%;
  left:0;
  pointer-events:none;
  opacity:0.5;
}

.page-input:focus ~ .highlight {
  -webkit-animation:.page-inputHighlighter 0.3s ease;
  -moz-animation:.page-inputHighlighter 0.3s ease;
  animation:.page-inputHighlighter 0.3s ease;
}

.signup-btn {
  position: relative;

  display: block;
  /*margin: 30px auto;*/
  margin-top:50px;
  padding: 0;

  overflow: hidden;

  border-width: 0;
  outline: none;
  border-radius: 2px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .6);

  background-color: #2ecc71;
  color: #ecf0f1;

  transition: background-color .3s;
}

.signup-btn:hover, .signup-btn:focus {
  background-color: #27ae60;
}

.signup-btn > * {
  position: relative;
}

.signup-btn span {
  display: block;
  padding: 12px 24px;
}

.signup-btn:before {
  content: "";

  position: absolute;
  top: 50%;
  left: 50%;

  display: block;
  width: 0;
  padding-top: 0;

  border-radius: 100%;

  background-color: rgba(236, 240, 241, .3);

  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.signup-btn:active:before {
  width: 120%;
  padding-top: 120%;

  transition: width .2s ease-out, padding-top .2s ease-out;
}

App.js

import React, { Component } from 'react';
import DietPlan from './components/DietPlan.js';
import LoseWeight from './components/LoseWeight.js';
import SignUp from './components/SignUp.js';
import FrontPage from'./components/FrontPage.js';
import LogIn from'./components/LogIn.js';
import BuildMuscleForm from'./components/BuildMuscleForm';
import {Route} from"react-router";
import {BrowserRouter} from"react-router-dom";

class App extends Component {
  render() {
    return (
      <BrowserRouter>
      <div>
        <Route exact path={"/"} component={FrontPage}/>
        <Route path={"/singup"} component={SignUp}/>
        <Route path={"/login"} component={LogIn}/>
        <Route path={"/buildmuscle"} component={BuildMuscleForm}/>
        <Route path={"/loseweight"} component={LoseWeight}/>
        <Route path={"/planning"} component={DietPlan}/>



      </div>
      </BrowserRouter>

    );
  }
}

export default App;

我非常难过，因为其他所有组件都在展示。所有我得到的是一个空白页面，没有错误。这可能是我没注意到的非常简单的事情。谢谢你的帮助

Answer 1

App.js定义了以下路线：

<Route path={"/singup"} component={SignUp}/>

其中指定SignUp组件的路径'/singup'而不是'/signup'

如果你纠正错字你应该能够看到你的组件 - 你也可以省略花括号

<Route path="/signup" component={SignUp} />

尽管没有错误，我的反应组件仍未显示

1 个答案: