0

我有两个侧边栏组件。它们都具有用作切换的功能。我想要做的是程序最初从 Sidebar.js 组件开始。默认情况下，侧边栏组件的切换属性为 true。

然后，当我按下流程页面的链接时，会在那里调用 ProcessSidebar.js 组件。我想将 isContentToggled 值保存在 Sidebar.js 中的 cookie 中，然后读取 ProcessSidebar.js 中的 isContentToggled 值并相应地影响我的侧边栏。

我想以同样的方式做相反的事情。我想将 isContentToggled 的值保存到 ProcessSidebar.js 中的 cookie，然后读取 Sidebar.js 中 isContentToggled 的值并相应地影响我的侧边栏。

我把我的代码放在下面。

Sidebar.js

`

import React, { useState } from 'react';
    import { useCookies } from 'react-cookie';
    
    import profileImage from '../../../assets/img/profil.jpg';
    import iconImage from '../../../assets/img/icon.jpg';
    import businessManImage from '../../../assets/img/business-man-white.svg';
    import preferencessImage from '../../../assets/img/cogs-white.svg';
    import logoutImage from '../../../assets/img/logout.svg';
    import toggleImage from '../../../assets/img/toggle-icon.png';
    import profileWhite from '../../../assets/img/profile-white.svg';
    import classes from '../Sidebar/Sidebar.module.css';
    
    const Sidebar = props => {
      const [isContentToggled, setIsContentToggled] = useState(true);
      let url = ""
      return (
        <div>
          <div className={classes['side-bar']}>
            <div className={classes['side-bar-top']}>
              <div className={classes['side-bar-icon']}>
                <img src={iconImage} alt="profileresmi" />
              </div>
            </div>
    
    
            <div className={classes['side-bar-row']} style={{ height: '100px' }} >
              <div className={classes['side-bar-icons']} style={{ width: '100px' }} >
                <div className={classes['side-bar-profile-image']}>
                  <img src={profileImage} alt="profileresmi" />
                </div>
              </div>
              {isContentToggled && (
                <div className={classes['side-bar-profile-content']}>
                  <h3><b>Mert EKİNCİ</b></h3>
                  <h4>mert@akturk.de</h4>
                </div>
              )};
                    </div>
    
            <div className={classes['side-bar-row']}>
              <div className={classes['side-bar-icons']}>
                <a href={url} className={classes['side-bar-elements-icons']}>
                  <img src={businessManImage} alt="profileresmi" />
                </a>
              </div>
              {isContentToggled && (
                <div className={classes['side-bar-text']}>
                  <a href="/processes" class="active" >Processes</a>
                </div>
              )}
            </div>
    
            <div style={{ clear: 'both' }} ></div>
            <div className={classes['side-bar-row']}>
              <div className={classes['side-bar-icons']}>
                <a href={url} className={classes['side-bar-elements-icons']}>
                  <img src={preferencessImage} alt="profileresmi" />
                </a>
              </div>
              {isContentToggled && (
                <div className={classes['side-bar-text']}>
                  <a href="/preferences" class="active">Preferences</a>
                </div>
              )}
            </div>
    
            <div className={classes['side-bar-row']}>
              <div className={classes['side-bar-icons']}>
                <a href={url} className={classes['side-bar-elements-icons']}>
                  <img src={profileWhite} alt="profileresmi" />
                </a>
              </div>
              {isContentToggled && (
                <div className={classes['side-bar-text']}>
                  <a href="/profile" class="active">User</a>
                </div>
              )}
            </div>
    
            <div className={classes['side-bar-row']}>
              <div className={classes['side-bar-icons']}>
                <a href={url} className={classes['side-bar-elements-icons']}>
                  <img src={logoutImage} alt="profileresmi" />
                </a>
              </div>
              {isContentToggled && (
                <div className={classes['side-bar-text']}>
                  <a href="/auth/login" class="active">Logout</a>
                </div>
              )}
            </div>
    
          </div>
          <div className={classes['side-toggle']}>
            <span onClick={() => setIsContentToggled(prevIsContentToggled => !prevIsContentToggled)
    
    
            } className={classes['side-bar-toggle']}>
              <img src={toggleImage} alt="profileresmi" />
            </span>
          </div>
        </div>
    
      );
    }
    
    export default Sidebar;

`

**ProcessSidebar.js**


`

import React, { useState } from 'react';
import { useCookies } from 'react-cookie';

import iconImage from '../../../assets/img/icon.jpg';
import backArrowImage from '../../../assets/img/back-arrow.png';
import toggleImage from '../../../assets/img/toggle-icon.png';
import classes from '../Sidebar/Sidebar.module.css';

const ProcessSidebar = props => {
  const [isContentToggled, setIsContentToggled] = useState(true);
  let url = ""

  return (
    <div>
      <div className={classes['side-bar']}>
        <div className={classes['side-bar-top']}>
          <div className={classes['side-bar-icon']}>
            <img src={iconImage} alt="" />
          </div>
        </div>

        <div className={classes['side-bar-row']} style={{ height: '70px', display: 'flex', alignItems: 'center' }}>
          <div className={classes['side-bar-icons']}>
            <a href={url} className={classes['side-bar-elements-icons']}>
              <div className={classes['back-arrow']}>
                <img src={backArrowImage} alt="" />
              </div>
            </a>
          </div>
          {isContentToggled && (
            <div className={classes['side-bar-text']} style={{width : '200px', textAlign: 'center', marginLeft: '.5rem'}} >
              <a href="/" class="active">HOME PAGE</a>
            </div>
          )}

        </div>

        {isContentToggled && (<div id="process-list" className={classes['side-bar-text']}></div>
        )}


        <div className={classes['side-toggle']}>
          <span onClick={() => setIsContentToggled(prevIsContentToggled => !prevIsContentToggled)} className={classes['side-bar-toggle']}>
            <img src={toggleImage} alt="toggle" />
          </span>
        </div>

      </div>
    </div>
  )
};


export default ProcessSidebar;

`

4

1 回答 1

1

我假设您正在使用useCookie，因为如果用户刷新页面，如果不是这种情况，您希望保留变量值，那么您可能正在使用useContext轻松共享两个组件之间的状态。

如果还没有，只需使用useEffect钩子来初始化 cookie，并在每次用户切换侧边栏时更新它。

const [isContentToggled, setIsContentToggled] = useState(true);
const [cookies, setCookie, removeCookie] = useCookies(['sideBarToggleCookie']);

useEffect(() => {
  if (!cookies.sideBarToggleCookie)
    setCookie('sideBarToggleCookie', isContentToggled)
  else
    setIsContentToggled(cookies.sideBarToggleCookie)

  if (cookies.sideBarToggleCookie !== isContentToggled)
    setCookie('sideBarToggleCookie', isContentToggled)
}, [isContentToggled])

同样在 onClick 中，只需像这样切换值，然后它将更新组件，而 useEffect 将更改 cookie 值：

setIsContentToggled(!isContentToggled)

我没有尝试代码，但希望它能让您了解如何执行此操作。

于 2020-12-12T13:15:15.990 回答