Question

我不确定如何添加单击事件以触发样式化组件中的活动类。我正在为代码使用React钩子和功能组件。

这是我要使用样式化组件复制的代码

        <ul className={click ? 'nav-menu active' : 'nav-menu'}>

现在它会自动显示活动的类，但是我只需要单击即可显示活动的类，但是我不知道该在哪里编写该代码以显示单击是对还是错？

        const NavMenu = styled.ul`
        display: flex;
        align-items: center;
        list-style: none;
        text-align: center;

        @media screen and (max-width: 960px) {
          display: flex;
          flex-direction: column;
          width: 100%;
          height: 90vh;
          position: absolute;
          top: 80px;
          left: -100%;
          opacity: 1;
          transition: all 0.5s ease;

          ${({ active }) =>
            active &&
            css`
              background: #1c2237;
              left: 0;
              opacity: 1;
              transition: all 0.6s ease;
              z-index: 1;
            `} 
        }
      `;

然后在我的NavMenu中，我添加了活动

      <NavMenu active></NavMenu>

Answer 1

您可以尝试这样。

<NavMenu active={click}>Your Menu</NavMenu>

如何使用on Click事件为条件渲染编写样式化组件？

1 个答案: