尝试将类应用于样式组件以进行 onclick 事件答案

【问题标题】：Trying to apply a class to a styled-component for an onclick event尝试将类应用于样式组件以进行 onclick 事件
【发布时间】：2021-05-20 19:07:03
【问题描述】：

在使用标准 JSX 和 CSS 时，我可以添加一个带有一些逻辑的 className 属性，以根据布尔值添加一个类名，但是在使用样式组件时，这似乎并不容易。这是我目前拥有的：

Menu.tsx

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

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

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

'...' expected.

希望你能在这里看到我想要做什么。

【问题讨论】：

标签： reactjs typescript styled-components

【解决方案1】：

您忘记添加类名。

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

顺便说一句：

如果你的组件中没有任何逻辑，你可以写成

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

【讨论】：

大声笑，我不知道为什么我没想过要尝试。我在想你不能用 styled-component 做到这一点，显然你可以。

【解决方案2】：

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

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

【讨论】：