CSS React onclick显示组件

问题描述

我正在学习CSS和做出反应，并且当用户单击按钮myButton时如何混淆组件的display：block有点困惑。并在用户再次单击该组件时将其隐藏。

我正在使用移动设备和桌面视图，并且希望该按钮不显示在桌面视图中，而只会显示在移动视图中。

在“移动”视图中，一旦用户单击按钮，切换组件就需要显示。那是我不知道如何才能使Toggle css display：block显示整个组件的onclick方法。在桌面视图中切换显示。

这是代码map.tsx

<div className={styles.controlsContainer}>
        <Toggle />
</div>
    <div className={styles.button_about}>
            <AboutPopup />
            <Button id=myButton
              type="primary"
              icon={<FilterOutlined />}
              className={styles.filterbutton} onClick== --- How to say to enable toggle css to block??
            ></Button>
          </div>

这是我的map.module.scss的样子

.toggle {
  width: 244px;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  Box-sizing: border-Box;
  border-radius: 4px;
  display: flex;
  align-items: center;
  float: left;
}
@media screen and (max-width: $mobileMax) {
  .toggle {
    display: none;
  }
}
.button {
  &_about {
    @include for-desktop {
      position: absolute;
      bottom: 2em;
      right: 2em;
    }
    @include for-mobile {
      position: absolute;
      top: 2em;
      z-index: 1;
      right: 2em;
      z-index: 1;
    }
  }
}

.filterbutton {
  width: 40px;
  height: 40px;
  left: calc(50% - 40px / 2);
  top: calc(50% - 40px / 2);
  background: $color-blue;
  border-radius: 100px;
  color: #83888c;
  @include for-desktop {
    display: none;
  }
  @include for-mobile {
    position: absolute;
    top: 4em;
    right: 2em;
  }
}

-----更新2 所以我做了这样的事情

const [isShow,setIsShow] = React.useState(true);
  const handleClick = () => {
    setIsShow((prev) => !prev);
    console.log(isShow);
  };
return
(
 <div className={styles.controlsContainer}>
        <Toggle
          className= {isShow ? {styles.toggle_show} : {styles.toggle_hide}} 
        />
)

但是我在styles.toggle_show上遇到了解析错误，解析错误：“，”期望。eslt

解决方法

也许这可以帮助

import React from "react";
import "./styles.css";

export default function App() {
  const [isShow,setIsShow] = React.useState(false);
  const handleClick = () => setIsShow((prev) => !prev);
  return (
    <>
      <div className={isShow ? "show" : "hide"}>my toggling component</div>
      <button onClick={handleClick}>toggle show</button>
    </>
  );
}

css：

.show {
  display: block;
}

.hide {
  display: none;
}