javascript - 在登录页面上隐藏标题

Question

我想隐藏登录页面中的标题栏，在成功登录后它应该出现在其他页面中我试图在 css 中创建一个类以隐藏标题但我找不到禁用方法登录成功后显示

import React, { Component } from 'react';
import './App.css';
import Authen from './Pages/Authen';
import Home from './Pages/Home';
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom';
class App extends Component {


  render() {
    return (

  <div className="app">

    <Router>
    <div>
       <div className="hide">
      <ul>
        <li><Link to="/Home">Home</Link></li>
      </ul>
      </div>
      <Route exact path="/" component={Authen}/>
      <Route path="/Home" component={Home}/>
    </div>
  </Router>

  </div>

    );
  }
}

export default App;

CSS:

.hide{
  display: none;
}

这就是页面从身份验证页面重定向到主页的方式。 登录页面与路由器页面不在同一个文件中:

    Login = () => {
    const email = this.refs.email.value;
    const password = this.refs.password.value;
    console.log(email,password);

    const auth = firebase.auth();

    const promise = auth.signInWithEmailAndPassword(email, password);

    promise.then(user =>{
      var lout = document.getElementById('Login');

      lout.classList.remove('hide');
    });

    promise.catch(e =>{
      var err = e.message;
      console.log(err);
      this.setState({err: err});
    });
    firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    console.log(user.uid);
 this.props.history.push('/Home')
  }
});
}

Answer 1

对我来说，您的代码有点不清楚，因为我们看不到您在哪里声明 header 。我可以看到有几种方法可以处理您的情况。

首先，我通常使用的是 React Redux 来控制我的用户的状态，并且根据用户的状态，您可以根据他是否在线来呈现 HTML。这是关于如何使用变量管理动态渲染的片段。

class App extends Component {
  render() {
    let header = user.LoggedIn ? <Header /> : null
    return (
      <div>
            {header}
      </div>
    );
  }
}

但是，根据您应用程序的当前状态，这可能是不必要的。如果你只在你的根页面上隐藏标题，为什么还要费心把它放进去。将它封装在你的主页中并结束它。