Как сохранить состояние вкладки (значения) после перезагрузки страницы с помощью параметров реагирования локального хранилища - PullRequest
Новая
       13

Как сохранить состояние вкладки (значения) после перезагрузки страницы с помощью параметров реагирования локального хранилища

0 голосов
/ 21 июня 2019

Я пытаюсь сохранить состояние ранее выбранной вкладки после перезагрузки страницы. После прочтения нескольких статей кажется, что использование параметров запроса является более эффективным выбором, учитывая текущую ситуацию, а не Redux при масштабировании. Может кто-нибудь показать пример или демонстрацию, если это возможно, о том, как я мог бы структурировать его для адаптации и использования в моей нынешней структуре? Спасибо за внимание.

Вот импорт: 

import React from 'react';
import AppBar from '@material-ui/core/AppBar';
import CssBaseline from '@material-ui/core/CssBaseline';
import Drawer from '@material-ui/core/Drawer';
import Hidden from '@material-ui/core/Hidden';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import {withStyles } from '@material-ui/core/styles';
import SearchBar from '../TopBar/SearchBar'
import Home from '../Screens/Home'
import Contact from '../Screens/Contact'
import Profile from '../Screens/Profile'
import Settings from '../Screens/Settings'
import Messages from '../Screens/Messages'
import Products from '../Screens/Products'
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import { Switch, Route, Link, BrowserRouter} from "react-router-dom";

Вот начало компонента класса: 

class StaticComponents extends React.Component {
  constructor(props) {
    super(props);
      this.state = { 
       values: 0,
        mobileOpen: false,
        active: true,
        width: window.outerWidth,
        height: window.outerHeight

       };
    this.handleChange = this.handleChange.bind(this);
    this.handleDrawerToggle = this.handleDrawerToggle.bind(this)
    this.closeDrawer = this.closeDrawer.bind(this)
    this.activAte = this.activAte.bind(this)
    this.updateDimensions = this.updateDimensions.bind(this);
    //binds the function not its variable
    }
    componentWillUpdate() {
      window.addEventListener("resize",this.updateDimensions);

    }


  handleChange=(_,values)=>this.setState({ values });

 updateDimensions() {
    this.setState({
      height: window.outerHeight, 
      width: window.outerWidth
    });
  }
  handleDrawerToggle(){
    const toggleDrawer= this.state.mobileOpen === false ? true : false;
    this.setState({mobileOpen: toggleDrawer})

  }

  closeDrawer(){
    this.setState({mobileOpen: false})
  }

activAte(){
  this.setState({active: true})
}

  render(){
const homeR= this.state.active
const {classes} = this.props;
const {values}= this.state
const widthS= this.state.width

Вот переменная ящика, содержащая структуру вкладки: 

const drawer = (
  <Route
    path="/"
    render={() => (
      <nav>
        <div style={{ left: 70, position: 'relative', marginTop: 40 }}>
          <VerticalTabs
            value={values}
            variant="fullWidth"
            onChange={this.handleChange}
          >
            <MyTab
              component={Link}
              to="/"
              disableRipple={widthS < 599 ? true : false}
              onClick={this.handleDrawerToggle}
              icon={
                <svg
                  version="1.1"
                  id="Capa_1"
                  xmlns="http://www.w3.org/2000/svg"
                  xlink="http://www.w3.org/1999/xlink"
                  x="0px"
                  y="0px"
                  width="460.298px"
                  height="460.297px"
                  viewBox="0 0 460.298 460.297"
                  space="preserve"
                  fill={values === 0 ? '#0D9DCE' : '#9B9B9B'}
                  className="home"
                >
                  {homeA}
                  {homeB}
                </svg>
              }
              label={
                <p
                  className="home-Text"
                  style={{ color: values === 0 ? 'white' : '#9B9B9B' }}
                >
                  Home
                </p>
              }
            />
            <MyTab
              component={Link}
              to="/Screens/Contact"
              disableRipple={widthS < 599 ? true : false}
              onClick={this.handleDrawerToggle}
              icon={
                <svg
                  height="512pt"
                  viewBox="0 0 512 512"
                  width="512pt"
                  xmlns="http://www.w3.org/2000/svg"
                  fill={values === 1 ? '#0D9DCE' : '#9B9B9B'}
                  className="processes"
                >
                  {ContactA}
                </svg>
              }
              label={
                <p
                  className="processes-Text"
                  style={{ color: values === 1 ? 'white' : '#9B9B9B' }}
                >
                  Contact
                </p>
              }
            />
            <MyTab
              component={Link}
              to="/Screens/Profile"
              disableRipple={widthS < 599 ? true : false}
              onClick={this.handleDrawerToggle}
              icon={
                <svg
                  version="1.1"
                  id="Capa_1"
                  xmlns="http://www.w3.org/2000/svg"
                  xlink="http://www.w3.org/1999/xlink"
                  x="0px"
                  y="0px"
                  viewBox="0 0 512.001 512.001"
                  space="preserve"
                  className="designs"
                  fill={values === 2 ? '#0D9DCE' : '#9B9B9B'}
                >
                  {ProfileA}
                </svg>
              }
              label={
                <p
                  className="designs-Text"
                  style={{ color: values === 2 ? 'white' : '#9B9B9B' }}
                >
                  Profile
                </p>
              }
            />
            <MyTab
              component={Link}
              to="/Screens/Settings"
              disableRipple={widthS < 599 ? true : false}
              onClick={this.handleDrawerToggle}
              icon={
                <svg
                  version="1.1"
                  id="Capa_1"
                  xmlns="http://www.w3.org/2000/svg"
                  xlink="http://www.w3.org/1999/xlink"
                  x="0px"
                  y="0px"
                  viewBox="0 0 512 512"
                  space="preserve"
                  className="materials"
                  fill={values === 3 ? '#0D9DCE' : '#9B9B9B'}
                >
                  {SettingsA}
                  {SettingsB}
                </svg>
              }
              label={
                <p
                  className="materials-Text"
                  style={{ color: values === 3 ? 'white' : '#9B9B9B' }}
                >
                  Settings
                </p>
              }
            />
            <MyTab
              component={Link}
              to="/Screens/Messages"
              disableRipple={widthS < 599 ? true : false}
              onClick={this.handleDrawerToggle}
              icon={
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  xlink="http://www.w3.org/1999/xlink"
                  width="512"
                  height="512"
                  viewBox="0 0 60 60"
                  version="1.1"
                  className="printers"
                  fill={values === 4 ? '#0D9DCE' : '#9B9B9B'}
                >
                  {MessagesA}
                  {MessagesB}
                  {MessagesC}
                  {MessagesD}
                  {MessagesE}
                  {MessagesF}
                </svg>
              }
              label={
                <p
                  className="printers-Text"
                  style={{ color: values === 4 ? 'white' : '#9B9B9B' }}
                >
                  Messages
                </p>
              }
            />
            <MyTab
              component={Link}
              to="/Screens/Products"
              disableRipple={widthS < 599 ? true : false}
              onClick={this.handleDrawerToggle}
              icon={
                <svg
                  height="512pt"
                  viewBox="0 0 512 512"
                  width="512pt"
                  xmlns="http://www.w3.org/2000/svg"
                  className="forum"
                  fill={values === 5 ? '#0D9DCE' : '#9B9B9B'}
                >
                  {ProductsA}
                  {ProductsB}
                  {ProductsC}
                </svg>
              }
              label={
                <p
                  className="QA-Text"
                  style={{ color: values === 5 ? 'white' : '#9B9B9B' }}
                >
                  Products
                </p>
              }
            />
          </VerticalTabs>
        </div>
      </nav>
    )}
  />
);

Вот структура маршрутизации, конечно, вложенная в BrowserRouter: 

<Switch>
  <Route path="/Screens/Contact" component{Contact} />
  <Route path="/Screens/Profile" component={Profile} />
  <Route path="/Screens/Settings" component={Settings}  />
  <Route path="/Screens/Messages" component={Messages} />
  <Route path="/Screens/Products" component={Products}  />
  <Route path="/" component={Home} />
</Switch>

1 Ответ

1 голос
/ 21 июня 2019

Трудно расшифровать ваш ящик, но я попробую. Параметры запроса доступны из this.props.location.search . Смотрите этот ответ . Вы можете использовать / screens / profile /: param в своем маршрутизаторе, чтобы, например, передать параметр в раздел профиля. А затем возьмите его в дочерний компонент с помощью упомянутой выше опоры.

Другой подход заключается в использовании свойства window.location и получении пути: 

const location = window.location.pathname;
const lastSlashIndex = location.lastIndexOf('/') + 1;
const id = location.substring(lastSlashIndex)

Здесь будет найден последний индекс косой черты, а идентификатор будет содержать параметр, который вы передали через маршрутизатор.

Если у вас есть несколько, вы можете сделать что-то вроде этого: 

const paramMap = new Map();
const searchSplit = location.search.split("&");
searchSplit.forEach(item => {
    paramMap.set(item.split("=")[0], item.split("=")[1])
});

Это найдет все параметры, которые вы передали, и вы сможете получить к ним доступ через conm paramMap через paramMap.get ("? Id"); например,

Надеюсь, я правильно понял ваш вопрос :)

...