反应添加活动类以单击元素

Question

我想添加活动类来单击元素，但它太像了。 我该如何解决？

const PodcastTab = () => {
const [tabOpened, setTabOpened] = useState(false);

  return <div>
      <div>
          <span className={classNames('my-podcast',{'active':tabOpened})} onClick={()=>{setTabOpened(!tabOpened)}}>My Podcast</span>
          <span className={classNames('podcasts-stats',{'active':!tabOpened})} onClick={()=>{setTabOpened(!tabOpened)}}>Podcast's Stats</span>
          <div className="my-podcast-tab">
                <Podcast />
            </div>
            <div className="podcasts-stats-tab">
                <Podcast imgURL="https://i.picsum.photos/id/144/75/75.jpg?hmac=9kweqWXv0sL19dFj1CaMKxbH3kQMIuFFbHy2hWhKJ4w" status="x" title="y"/>
            </div>
      </div>
      
  </div>;
}

Answer 1

您可以使用以下类名：

className={classNames('podcasts-stats',{tabOpened ? 'active' : ''})}