react动态渲染class类名（条件渲染）

最新推荐文章于 2025-07-06 18:49:38 发布

原创最新推荐文章于 2025-07-06 18:49:38 发布 · 1w 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react #className

react 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在React中使用条件渲染来动态切换元素的类名，实现如高亮显示等功能。同时，深入探讨SCSS的&语法，用于创建更灵活的CSS选择器，例如a标签的hover状态和普通标签的active状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前提：有时候在开发过程中需要动态渲染类名，比如高亮显示，active状态等。

下面是react写法，记录一下：

<div className={counts>0?"logo highlight":"logo"} >
       <Icon  className={counts>0?"icon-shopping-cart highlight":"icon-shopping-cart"}  size="md" type="check-circle-o" />
</div>

这段代码的目的是当counts大于0的时候添加高亮状态。

另外scss对于这种active写法（实例 a标签的hover状态和普通标签active状态）： &表示引用父选择符：

1）hover写法

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

编译后

a {
  font-weight: bold;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }
  body.firefox a {
    font-weight: normal; }

2）active状态

 .icon-shopping-cart{
     color: #80858a;
     width: 30px;
     height: 30px;
     margin-top: 6px;
     &.highlight{
         color: #fff;
      }
}

编译后

.icon-shopping-cart{
     color: #80858a;
     width: 30px;
     height: 30px;
     margin-top: 6px;

}
.icon-shopping-cart .highlight{
         color: #fff;
  }