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

对我而言，您的代码有点不清楚，因为我们无法看到您声明标题的位置。我可以看到几种可以处理你情况的方法。

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

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

但是，根据您的应用程序的当前状态，这可能是不必要的。如果您只隐藏根页面上的标题，为什么还要打扰它。将它封装在您的主页中并将其称为一天。

在登录页面上隐藏标题

1 个答案: