如何根据 App.js 中的 localstorage 值使用 React Hooks 切换类？答案

【问题标题】：How to toggle class using React Hooks as per localstorage value in App.js?如何根据 App.js 中的 localstorage 值使用 React Hooks 切换类？
【发布时间】：2021-08-22 18:23:26
【问题描述】：

我只想在用户登录时将class="main" 添加到div 和id="mainDiv"，并在用户注销时将其删除。请有人帮助我。

这是 App.js 的代码：

import React, { useEffect, useState } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Login from './components/Login/Login';
import Navbar from './components/Navbar/Navbar';
import Homepage from './components/Homepage/Homepage';
import Contentpage from './components/Contentpage/Contentpage';
import TerminalUI from './components/Terminal/Terminal';
import './App.css';

function App() {

  const [status, setStatus] = useState(false); //loggedout

  const user = window.localStorage.user;

  const manipulateClass = () => {
    let x = document.getElementById('mainDiv');
    if (localStorage.getItem('user')) {
      x.className = 'main';
    } else {
      x.classList.remove('main');
    }
  };

  useEffect(() => {
    console.log('your window local storage :: ', user);
    if (user) {
      setStatus(true);
      manipulateClass();
      console.log('Here $tatu$ is ', status);
    } else {
      manipulateClass();
      console.log('i am log out');
    }
  },[status]);

  return (
    <React.Fragment>
      <Router>
        <Navbar />
        <div id="mainDiv">
          <Switch>
            <Route exact path="/" component={Homepage} />
            <Route path="/login" component={Login} />
            <Route path="/chapters" component={Contentpage} />
            <Route path="/terminal" component={TerminalUI} />
          </Switch>
        </div>
      </Router>
    </React.Fragment>
  );
}

export default App;

【问题讨论】：

标签： javascript reactjs react-hooks local-storage

【解决方案1】：

最简单的方法是这样做：

<div className={status && 'main'}>

【讨论】：

【解决方案2】：

最好将你的心态改为State -> UI。不要以命令的方式自己改变 DOM。

所以，而不是

const user = window.localStorage.user;

您可以拥有一个状态，每次本地存储更改时都会更新：

const [user, setUser] = useState(undefined);

// listen for any local storage changes.
// make sure that `user` has always the latest value
useEffect(() => {
  function syncUserState() {
    const user = localStorage.getItem('user')
    setUser(user)
  }

  window.addEventListener('storage', syncUserState)

  return () => {
    window.removeEventListener('storage', syncUserState)
  }
}, [])

现在你有了这个，你可以派生你需要的其他东西

// if `user` exist, the the class will we main, otherwise it will empty
const mainClass = user ? `main` : ``

// ...

 <div id="mainDiv" className={mainClass}>

从状态中，您可以获得 UI。

【讨论】：