文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >反应状态不起作用

问反应状态不起作用
EN

Stack Overflow用户
提问于 2022-05-28 16:15:45
回答 1查看 60关注 0票数 0

我开始做这个教程，并达到了关于制作侧边栏的程度，指导员做了一个钩子，也做了一个上下文提供程序，然后他的按钮完成了它的切换功能，但是在介绍了钩子之后，我的侧边栏就消失了。

我应该得到这样的东西，在这里，谦卑的菜单切换侧边栏，我还没有做汉堡包菜单，在我的菜单中，它只是侧栏中的一个X按钮，它应该用来切换它，但是我甚至没有看到我的侧边栏：

​

​

我所看到的就是：

​

​

这是我的侧边栏组件：

​

代码语言：javascript
复制
import React from 'react'
import { Link, NavLink } from 'react-router-dom';
import { SiShopware } from 'react-icons/si'
import { MdOutlineCancel } from 'react-icons/md'
import { TooltipComponent } from '@syncfusion/ej2-react-popups'
import { links } from '../data/dummy';
import { useStateContext } from '../contexts/ContextProvider'; 
const Sidebar = () => {
  const { activeMenu, setActiveMenu } = useStateContext();
  const activeLink = 'flex items-center w-40 gap-5 pl-4 pt-3 pb-2.5 rounded-lg text-white text-md m-2';
  const normalLink = 'flex items-center w-40 gap-5 pl-4 pt-3 pb-2.5 rounded-lg text-lg hover:bg-gray-200 text-gray-700 dark:text-gray-200 dark:hover:text-black m-2';
  return ( 
    <div className="ml-3 h-screen md:overflow-hidden overflow-auto md:hover:overflow-auto pb-10">
      {activeMenu && (<>
        <div className="overflow-y-auto py-4 px-3 bg-gray-50 rounded dark:bg-gray-800">
        <div className="display: inline-flex">
          <Link to ="/" onClick={() => { setActiveMenu(false) }} className="flex inline-flex items-center gap-3 ml-3 mt-4
           flex text-xl font-extrabold tracking-tight dark:text-white text-slate-900">
            <SiShopware /> <span>Shoppy</span>
          </Link>
          <div className="pl-5 p-5 mt-6 ml-14">
          <TooltipComponent content="Menu" position="BottomCenter">
            <button type="button"
            onClick={() => setActiveMenu(prevActiveMenu => !prevActiveMenu)}
            className="text-xl rounded-full hover:bg-light-grayblock md:hidden">
              <MdOutlineCancel />
            </button>
          </TooltipComponent>
          </div>
        </div>  
        <div className="mt-10">
          {links.map((item) => (
            <div key={item.title}>
              <p className="text-gray-400 dark:text-gray-400 m-3 mt-4 uppercase">
                {item.title}
              </p>  
              {item.links.map((link) => (
                <div className="flex">
                <NavLink to={`/${link.name}`}
                key={link.name}
                onClick={() => {}}
                className={({ isActive }) =>
                  isActive ? activeLink : normalLink
                }
                >
                  <div className="mt-1 pl-2">
                  {link.icon}
                  </div>
                  <span className="capitalize">
                  {link.name}
                  </span>
               
                </NavLink>
                </div>
              ))}
            </div>
          ))}
        </div>
        </div>
        </>)}
    </div>
  )
}

export default Sidebar

​

这是contextProvide.js:

​

代码语言：javascript
复制
import React from 'react'
import { Link, NavLink } from 'react-router-dom';
import { SiShopware } from 'react-icons/si'
import { MdOutlineCancel } from 'react-icons/md'
import { TooltipComponent } from '@syncfusion/ej2-react-popups'
import { links } from '../data/dummy';
import { useStateContext } from '../contexts/ContextProvider'; 
const Sidebar = () => {
  const { activeMenu, setActiveMenu } = useStateContext();
  const activeLink = 'flex items-center w-40 gap-5 pl-4 pt-3 pb-2.5 rounded-lg text-white text-md m-2';
  const normalLink = 'flex items-center w-40 gap-5 pl-4 pt-3 pb-2.5 rounded-lg text-lg hover:bg-gray-200 text-gray-700 dark:text-gray-200 dark:hover:text-black m-2';
  return ( 
    <div className="ml-3 h-screen md:overflow-hidden overflow-auto md:hover:overflow-auto pb-10">
      {activeMenu && (<>
        <div className="overflow-y-auto py-4 px-3 bg-gray-50 rounded dark:bg-gray-800">
        <div className="display: inline-flex">
          <Link to ="/" onClick={() => { setActiveMenu(false) }} className="flex inline-flex items-center gap-3 ml-3 mt-4
           flex text-xl font-extrabold tracking-tight dark:text-white text-slate-900">
            <SiShopware /> <span>Shoppy</span>
          </Link>
          <div className="pl-5 p-5 mt-6 ml-14">
          <TooltipComponent content="Menu" position="BottomCenter">
            <button type="button"
            onClick={() => setActiveMenu(prevActiveMenu => !prevActiveMenu)}
            className="text-xl rounded-full hover:bg-light-grayblock md:hidden">
              <MdOutlineCancel />
            </button>
          </TooltipComponent>
          </div>
        </div>  
        <div className="mt-10">
          {links.map((item) => (
            <div key={item.title}>
              <p className="text-gray-400 dark:text-gray-400 m-3 mt-4 uppercase">
                {item.title}
              </p>  
              {item.links.map((link) => (
                <div className="flex">
                <NavLink to={`/${link.name}`}
                key={link.name}
                onClick={() => {}}
                className={({ isActive }) =>
                  isActive ? activeLink : normalLink
                }
                >
                  <div className="mt-1 pl-2">
                  {link.icon}
                  </div>
                  <span className="capitalize">
                  {link.name}
                  </span>
               
                </NavLink>
                </div>
              ))}
            </div>
          ))}
        </div>
        </div>
        </>)}
    </div>
  )
}

export default Sidebar

​

，这是index.js

​

代码语言：javascript
复制
import React from 'react';
import ReactDOM from 'react-dom';

import './index.css'; 
import App from './App';
import { ContextProvider } from './contexts/ContextProvider';//TODO:HERE
ReactDOM.render(
    <React.StrictMode> //TODO:HERE
    <ContextProvider>
      <App />
    </ContextProvider>
  </React.StrictMode>,//TODO:HERE
    document.getElementById('root') 
    );

​

与app.js:

​

代码语言：javascript
复制
import React, { useEffect } from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { FiSettings } from 'react-icons/fi'
import { TooltipComponent } from '@syncfusion/ej2-react-popups';

import { Navbar, Footer, Sidebar, ThemeSetting } from './components';
import { ECommerce, Orders, Calendar, Employees, Stacked, Pyramid, Customers, Kanban, Area, Bar, Pie, Financial, ColorPicker, ColorMapping, Editor }
from './pages'
import { useStateContext } from './contexts/ContextProvider';


import './App.css'

const App = () => {
  const { activeMenu } = useStateContext;
  return (
    <div>
        <BrowserRouter>
                <div className="flex relative dark:bg-main-dark-bg">
                <div className="fixed right-4 bottom-4" style={{ zIndex:'1000'}}>
                    <TooltipComponent content="Settings" position="Top">
                        <button type="button" className="text-3xl p-3 hover:drop-shadow-xl hover:bg-light-gray text-white "
                        style={{background:'blue', borderRadius: '50%'}}
                        >
                            
                        <FiSettings />
                        </button>
                    </TooltipComponent>
                </div>
                { activeMenu ? (
                    <div className = "w-72 fixed sidebar dark:bg-secondary-dark-bg bg-white">
                        <Sidebar />
                    </div>
                ) : (
                    <div className="w-0 dark:bg-secondary-dark-bg">
                         <Sidebar />
                    </div>
                )}
                <div className={
                    `dark:bg-main-bg bg-main-bg min-h-screen w-full ${activeMenu ? 'w-full'
                    : 'flex-2'}`
                }>
                    <div className="fixed md:static bg-main-bg dark:bg-main-dark-bg navbar w-full">
                        <Navbar />
                    </div>
                </div>
                <div>
                    <Routes>
                        {/*Dashboard*/}
                        <Route path="/" element={<ECommerce />}/>
                        <Route path="/ecommerce" element={<ECommerce />}/>
                        {/*Pages */}
                        <Route path="/orders" element={<Orders />}/>
                        <Route path="/employees" element={<Employees />}/>
                        <Route path="/customers" element={<Customers />}/>
                        {/*Apps*/}
                        <Route path="/kanban" element={<Kanban />}/>
                        <Route path="/editor" element={<Editor />}/>
                        <Route path="/calendar" element={<Calendar />}/>
                        <Route path="/color-picker" element={<ColorPicker />}/>
                        {/*Charts*/}
                        {/*
                        <Route path="/line" element={<Line />}/> 
                        <Route path="/area" element={<Area />}/>
                        <Route path="/bar" element={<Bar />}/>
                        <Route path="/pie" element={<Pie />}/>
                        <Route path="/financial" element={<Financial />}/>
                        <Route path="/color-mapping" element={<ColorMapping />}/>
                        <Route path="/pyramid" element={<Pyramid />}/>
                        <Route path="/stacked" element={<Stacked />}/>
                    */}
                    </Routes>
                </div>
            </div> 
        </BrowserRouter>
    </div>
  )
}

export default App

​

这是我做的事情的链接，以防有人想要现场观看：GitPod链路

这是主要的回购：主要回购

reactjs
react-hooks
javascript
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-05-28 16:35:49

在使用useStateContext时出现问题，您忘记使用它作为函数

App.js

代码语言：javascript
复制
const { activeMenu } = useStateContext();
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/72417283

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档