隱藏側邊欄中的任何元素

我想根據登錄用戶的級別隱藏側邊欄上的某些部分。我正在使用 Parse 庫，并在資料庫中為用戶創建級別類。我可以達到當前登錄用戶的級別，

Parse.User.current().get("level")

如何在下面的代碼中隱藏 sidebarNavItems 陣列的某些部分？我嘗試的一切都沒有奏效。

import { useEffect, useRef, useState, useContext } from 'react';
import { Link, useLocation } from 'react-router-dom';
import './sidebar.scss';
import { UserContext } from '../../UserContext';
import Parse from 'parse/dist/parse.min.js';


const sidebarNavItems = [
    {
        display: 'Home',
        icon: <i className='bx bx-home'></i>,
        to: '/',
        section: ''
    },
    {
        display: 'Calendar',
        icon: <i className='bx bx-calendar'></i>,
        to: '/calendar',
        section: 'calendar'
    },
    {
        display: 'Profile',
        icon: <i className='bx bx-user'></i>,
        to: '/userProfile',
        section: 'user'
    },
    {
        display: 'Edit Menu',
        icon: <i className='bx bx-receipt'></i>,
        to: '/menuEditer',
        section: 'menuEditer'
    },
    {
        display: 'Settings',
        icon: <i className={'bx bx-receipt'}></i>,
        to: '/settings',
        section: 'order'
    },
]

const Sidebar = () => {
    const [activeIndex, setActiveIndex] = useState(0);
    const [stepHeight, setStepHeight] = useState(0);
    const sidebarRef = useRef();
    const indicatorRef = useRef();
    const location = useLocation();
    const { user, setUser } = useContext(UserContext);
    useEffect(() => {
        setTimeout(() => {
            const sidebarItem = sidebarRef.current.querySelector('.sidebar__menu__item');
            indicatorRef.current.style.height = `${sidebarItem.clientHeight}px`;
            setStepHeight(sidebarItem.clientHeight);
        }, 50);
    }, []);

    // change active index
    useEffect(() => {
        const curPath = window.location.pathname.split('/')[1];
        const activeItem = sidebarNavItems.findIndex(item => item.section === curPath);
        setActiveIndex(curPath.length === 0 ? 0 : activeItem);
    }, [location]);

    return <div className='sidebar'>
        <div className="sidebar__logo">
            <img
                height={'100px'} width={'100px'}
                alt="Back4App Logo"
                src={
                    'https://media-exp1.licdn.com/dms/image/C4E0BAQHIMEfhiwYd6g/company-logo_200_200/0/1624274901673?e=2147483647&v=beta&t=lu-YPbJ08TGLRx5frzPlUBgIVRuFlj4oXTNUjbOXj4w'
                }
            />
            {/* <pre>{"Welcome "   JSON.stringify(user.get("username"), null, 2).replace("\"","").substring(0,JSON.stringify(user.get("username"), null, 2).replace("\"","").length -1)}</pre> */}
            {/* <span style={{marginTop:'15px'}}>&#9881;</span> */}
        </div>
        <div class="line"></div>
        <div class="vl"></div>
        <div ref={sidebarRef} className="sidebar__menu">
            {/* <div
                ref={indicatorRef}
                className="sidebar__menu__indicator"
                style={{
                    transform: `translateX(-50%) translateY(${activeIndex * stepHeight}px)`
                }}
            ></div> */}
            {
                sidebarNavItems.map((item, index) => (
                    <Link to={item.to} key={index}>
                        <div className={`sidebar__menu__item ${activeIndex === index ? 'active' : ''}`}>
                            <div className="sidebar__menu__item__icon">
                                {item.icon}
                            </div>
                            <div className="sidebar__menu__item__text">
                                {item.display}
                            </div>
                        </div>
                    </Link>
                ))
            }
        </div>
    </div>;
};

export default Sidebar;

我不想因為截止日期的原因而改變很多東西。這就是為什么我在此代碼上專門詢問這個問題。我感謝任何幫助。

uj5u.com熱心網友回復：

如果您希望根據用戶權限級別隱藏側邊欄中的某些元素，然后假設Parse.User.current().get("level")正確回傳級別，那么類似以下內容將允許您控制顯示的內容：

Parse.User.current().get("level") === "admin" ? "hidden content" : ""

為了控制從 顯示的內容sidebarNavItems，您可以為每個物件添加訪問級別屬性：

{
  display: 'Home',
  icon: <i className='bx bx-home'></i>,
  to: '/',
  section: '',
  accessLevel: 'admin'
},
{
  display: 'Example',
  icon: <i className='bx bx-home'></i>,
  to: '/',
  section: '',
  accessLevel: null
},

然后檢查您的map. 如果它為空，那么我們可以回傳公共鏈接，否則我們檢查用戶級別是否匹配，如果用戶沒有所需的級別，則回傳私有鏈接或不呈現任何內容。

!item.accessLevel
  ? <Link to={item.to} key={index}>Public Access</Link>
  : item.accessLevel === Parse.User.current().get("level")
  ? <Link to={item.to} key={index}>Private Access</Link>
  : ""

希望這可以幫助！

標籤：javascript html css 节点.js 反应

上一篇：如何合并陣列內物件中的元素并回傳具有更新資料的唯一物件

下一篇：NodeJS中的粉筆問題