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

Question

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

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

这是我的代码问题

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>包裹了我的整个代码。

有没有一种更简单的方法可以用样式化的组件切换活动道具，而不必在:或语句中重新复制我的整个导航栏？

Answer 1

假设active是一个booelan，你可以像一样设置active={scroll}

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