在两个组件之间使用 Cookie

Question

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

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

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

我把我的代码放在下面。

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;

`

Answer 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)

我没有尝试代码，但希望它能给你一个如何做的想法。

在两个组件之间使用 Cookie

Use of Cookies between two components

reactjs

react-router

react-redux

react-cookie

react-hooks