使用三元运算符在 sass/React 中有条件地应用 class

Question

我对 sass 和 React 还很陌生。我在搜索时没有找到这个确切的问题。任何建议，将不胜感激。我使用 React、socket io、node 和 sass 编写了一个基本的实时应用程序。我试图记录哪些用户是 online/offline。我想通过根据它们是否有到 space 的活动套接字连接显示一个绿色或红色圆圈来做到这一点。为此，我使用了一个映射和一个三元运算符。这部分工作没有问题：

render() {
    console.log(this.props);
    const members = this.props.users.map((user, i) => {
       console.log(user);

        return <li key={i} className={"member-info " + (user.active ? 
'online' : 'offline')}>                   
                    <h2>{user.username}<div className="circle"></div></h2>
                    <h4>Joined: {moment(user.joined).format("MMM Do YY")}</h4>               
                </li>
    })

在线用户申请了在线class，离线用户申请了离线class。我想使用这个值来确定下面列表中的圆圈 (className = circle) 的填充。我已经尝试了几种变体，但还没有让它发挥作用。因此，如果用户在线，我希望圆圈的背景色为绿色，如果离线，则为红色。这是这部分我的 sass 代码。成员是 ul，成员信息是 li。任何关于如何完成上述颜色变化的建议将不胜感激：

.members{
                border: 1px solid gray;
                background-color: royalblue;
                color: white;
                max-height: 45%;
                overflow-y: scroll;
                .member-info{
                    border: 1px solid gray;
                    padding: 10px;
                    a{
                        text-decoration: none;
                        color: white;
                          a:visited { text-decoration: none; }
                          a:hover { text-decoration: underline; }
                          a:focus { text-decoration: none; }
                          a:hover, a:active { text-decoration: underline; }

                    }
                }
            }

提前感谢您的任何建议。

Answer 1

我以前见过这种语法：

<li key={i} className={`member-info  ${user.active ? "online" : "offline"} `}>

希望对您有所帮助:)

Answer 2

试试这个：

render() {
  return (
    <ul>
      {this.props.users.map((user, i) => {
        return (
          <li
            key={i}
            // You might not need className on the <li>
          >
            <h2>
              {user.username}
              <div
                className={`circle ${
                  user.active ? "circle--online" : "circle--offline"
                }`}
              />
            </h2>
            <h4>Joined: {moment(user.joined).format("MMM Do YY")}</h4>
          </li>
        );
      })}
    </ul>
  );
}

然后是你的 SASS:

.circle {
  &--online {
    color: green;
  }
  &--offline {
    color: red;
  }
}

我推荐几样东西。

考虑为您的组件设置一个 "default" 状态，然后有条件地应用修饰符。而不是...

"member-info " + (user.active ? "online" : "offline")

...尝试将 "offline" 视为您的默认状态，然后有条件地添加 "online" 作为您唯一的修饰符。

有一个非常轻量级的包（零依赖）叫做 classnames。它允许您更轻松地构建条件 class 字符串：

import classNames from "classnames";

const classes = classNames("member-info", {
  "member-info--online": true  // <-- String: Boolean
}); // => "member-info member-info--online"

通过只有一个默认状态和一个修改后的状态，我可以删除上面 SASS 的一半。假设 "circle" 本身表示离线，而 "circle--online" 表示在线：

.circle {
  color: red;

  &--online {
    color: green;
  }
}

这种带有双破折号的命名约定称为 BEM，它非常适合 SASS。

使用三元运算符在 sass/React 中有条件地应用 class

Applying class conditionally in sass/React using ternary operator

css

conditional

sass

ternary-operator

reactjs