如何在React+Sass中用三元运算符设置在线/离线用户圆圈颜色

嗨，别担心，你已经走对路了——把online/offline类加到li上的思路完全没问题，现在只需要在Sass里补全对应的样式规则就行啦！

问题所在 #

你的Sass代码里还没有针对.online和.offline类下的.circle元素设置背景色，所以即使类名正确加上了，样式也不会生效。

解决方案 #

修改你的Sass代码，利用Sass的父选择器&来精准定位不同状态下的圆圈：

.members{
  border: 1px solid gray;
  background-color: royalblue;
  color: white;
  max-height: 45%;
  overflow-y: scroll;

  .member-info{
    border: 1px solid gray;
    padding: 10px;

    // 给圆圈添加基础样式（确保它显示为圆形）
    .circle {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      display: inline-block;
      margin-left: 8px; // 和用户名拉开点间距，更美观
    }

    // 在线状态：绿色圆圈
    &.online .circle {
      background-color: #2ecc71; // 柔和的绿色，比纯绿更舒服
    }

    // 离线状态：红色圆圈
    &.offline .circle {
      background-color: #e74c3c; // 柔和的红色
    }

    a{
      text-decoration: none;
      color: white;

      &:visited { text-decoration: none; }
      &:hover { text-decoration: underline; }
      &:focus { text-decoration: none; }
      &:hover, &:active { text-decoration: underline; }
    }
  }
}

为什么这样有效？ #

• &是Sass的父选择器，它会直接替换为父级选择器的内容。比如&.online就等同于.member-info.online，这样就能精准选中带有online类的.member-info元素下的.circle。
• 我们先给.circle设置了基础的宽高、圆角和行内块属性，确保它能显示成一个圆形——如果没有这些基础样式，即使背景色对了，你也看不到圆圈哦。

额外小提示 #

你的React渲染代码可以稍微优化下类名的写法，用模板字符串更清晰：

className={`member-info ${user.active ? 'online' : 'offline'}`}

这样写比字符串拼接更易读，也符合React的常见写法~

内容的提问来源于stack exchange，提问作者inakajin