时间戳

首页 > 解决方案 > 如何使用 React 中的 Hooks 在带有汉堡菜单的标题中切换侧边栏组件

javascript - 如何使用 React 中的 Hooks 在带有汉堡菜单的标题中切换侧边栏组件

问题描述

我是 React 的新手，也许有人可以帮助我。我想用 Hooks 在我的 Header 组件中切换我的侧边栏。

这是我的代码：

Sidebar.js

...imported things
...styles

export const SideBar = () => {
  const history = useHistory();

  return (
    <StyledSideBar>
      <Tooltip title="Dashboard" placement="right" arrow >
        <StyledButton onClick={() => history.push('/dashboard')}>
          <FontAwesomeIcon icon={faTachometerAltFast} />
        </StyledButton>
      </Tooltip >
      <Tooltip title="Chat" placement="right" arrow>
        <StyledButton onClick={() => history.push('/chat')}>
          <FontAwesomeIcon icon={faCommentsAlt} />
        </StyledButton>
      </Tooltip>
      <Tooltip title="Calendar" placement="right" arrow>
        <StyledButton onClick={() => history.push('/calendar')}>
          <FontAwesomeIcon icon={faCalendarAlt} />
        </StyledButton>
      </Tooltip>
    </StyledSideBar>
  );
}

export default SideBar;

页眉.js

...imported things
...styles
import SideBar from '../sidebar';

export const MainHeader = () => {
  const [show, setShow] = React.useState(false);
  const toggle = () => setShow(!show);

  return (
  <AppBar elevation={2} position="sticky" color="inherit" >
    <FlexToolbar variant="regular">
      <StyledMenuIcon open={show} onClick={toggle.{SideBar}>
        <FontAwesomeIcon icon={faBars} />
      </StyledMenuIcon>
      <Logo src="/assets/images/logo.svg" alt="Vetera Sky" />
      <BreakpointLogo src="/assets/images/get-started-icon.svg" alt="Vetera Sky" />
      <Spacer />
      <LogoutButton onClick={onLogout}>
        <FontAwesomeIcon icon={faPowerOff} />
        <Typography variant="label" color={actionSecondary}>Logout</Typography>
      </LogoutButton>
      <BreakpointLogoutButton onClick={onLogout}>
        <FontAwesomeIcon icon={faPowerOff} />
      </BreakpointLogoutButton>
    </FlexToolbar>
  </AppBar>

  )};

export default MainHeader;

我知道这是错误的，但我在网上或这里找不到任何东西。如果单击 StyledMenuIcon 一次，侧边栏应该在左侧打开，如果再次单击它应该关闭。

希望有人能尽快帮助我:)

标签： javascriptreactjsreact-hookstogglesidebar

解决方案

您应该在 MainHeader 和 SideBar 组件都可以使用它的树中将您的状态向上移动：

function App() {
    const [showSidebar, setShowSidebar] = useState(false);

    const onToggleSidebar = () => {
        setShowSidebar(!showSidebar);
    };

    return (
        <MainHeader onToggleSidebar={onToggleSidebar} />
        <SideBar open={showSidebar}
    );
}

如果组件在树中的同一级别上不可用，您可以使用 React 的上下文 api 从树的不同位置使用此逻辑。

或者，如果您已经在使用 redux 或其他状态管理系统，您可以将您的应用程序状态移到那里。

推荐阅读