尝试将 class 应用于 onclick 事件的样式组件

Question

在使用标准 JSX 和 CSS 时，我可以添加一个带有一些逻辑的 className 属性，以基于 boolean 值添加一个 class 名称，但是当使用 styled-components 时，这似乎并不容易， 这就是我目前所拥有的：

菜单.tsx

interface IMenuProps {
  showMenu: boolean;
  menuToggle: () => void;
}

const Menu: React.FC<IMenuProps> = ({ showMenu, menuToggle }) => {
  return (
    <MenuWrapper onClick={menuToggle} {showMenu ? "showMenu" : ""}>
      ...

目前，三元语句中的showMenu下方有一条红线。

'...' expected.

希望你能看到我在这里尝试做的事情。

Answer 1

您忘记添加类名。

 const Menu: React.FC<IMenuProps> = ({ showMenu, menuToggle }) => { return ( <MenuWrapper onClick={menuToggle} className={showMenu? "showMenu": ""}>

顺便提一句：

如果您的组件内没有任何逻辑，您可以将其编写为

 const Example: FC = () => ( <div> <h1>Example</h1> </div> );

Answer 2

您是否为样式化的 MenuWrapper 编写了类型？ 如果没有，请尝试以下操作：

const MenuWrapper = styled.div<{showMenu?:boolean}>