reactjs - React 三元运算符防止使用样式化组件重复代码？

Question

所以我使用了样式化的组件，发现触发我的函数的唯一方法是使用一个包含整个导航栏组件的三元运算符。问题是我必须将整个组件代码重新复制到:语句中，这基本上意味着我要编写两次导航组件代码，只是为了让三元组正常工作。

有没有办法不重复，用最少的代码写三进制？

所以这是我的代码问题

  return (
    <>
     // If scroll is true, I want to add this active prop onto my <Nav>
        {scroll ? (
          <Nav active click={click}>
            <NavbarContainer>
              <NavLogo to="/" onClick={closeMobileMenu}>
                <NavIcon />
                EXPLOR
              </NavLogo>
              <MobileIcon onClick={handleClick}>
                {click ? <FaTimes /> : <FaBars />}
              </MobileIcon>
              <NavMenu onClick={handleClick} click={click}>
                <NavItem>
                  <NavLinks to="/">Home</NavLinks>
                </NavItem>
                <NavItem>
                  <NavLinks to="/images">Images</NavLinks>
                </NavItem>
                <NavItem>
                  <NavLinks to="/products">Products</NavLinks>
                </NavItem>
        </Nav>

       : 

         // If the scroll is false, I remove the active prop from my nav
         (
          <Nav click={click}>
            <NavbarContainer>
              <NavLogo to="/" onClick={closeMobileMenu}>
                <NavIcon />
                EXPLOR
              </NavLogo>
              <MobileIcon onClick={handleClick}>
                {click ? <FaTimes /> : <FaBars />}
              </MobileIcon>
              <NavMenu onClick={handleClick} click={click}>
                <NavItem>
                  <NavLinks to="/">Home</NavLinks>
                </NavItem>
                <NavItem>
                  <NavLinks to="/images">Images</NavLinks>
                </NavItem>
                <NavItem>
                  <NavLinks to="/products">Products</NavLinks>
                </NavItem>
        </Nav>
    }
 </>

重点是我可以从我的样式组件触发这个活动道具

    background: ${({ active }) => (active ? "#141414" : "transparent")};

但是正如你所看到的，我不得不复制我的整个组件代码两次，因为<Nav>具有 active 属性的那个包裹了我的整个代码。

有没有更简单的方法来切换带有样式组件的活动道具，而不必在:or 语句中重新复制我的整个导航栏？

标签： reactjsstyled-components

Answer 1

假设 active 是一个布尔值，您可以像这样简单地设置 active={scroll }

 <Nav active={scroll} click={click}>
    .....
 </Nav>