Условное применение класса в sass / React с использованием троичного оператора - PullRequest
Новая
       34

Условное применение класса в sass / React с использованием троичного оператора

0 голосов
/ 24 мая 2018

Я довольно новичок в Sass и React.Я не нашел этот точный вопрос при поиске.Мы ценим любые предложения.Я написал простое приложение для реального времени, используя React, сокет io, node и sass.Я пытаюсь отметить, какие пользователи онлайн / оффлайн.Я хотел бы сделать это, показывая зеленый или красный круг в зависимости от того, имеют ли они активные сокет-соединения с пробелом.Для этого я использовал карту и троичный оператор.Эта часть работает без проблем: 

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>
    })

Онлайн-пользователи применяют онлайн-класс, а автономные пользователи применяют автономный класс.Я хотел бы использовать это значение для определения заполнения круга (className = circle) в списке ниже.Я перепробовал несколько вариантов и до сих пор не заработал.Итак, если пользователь в сети, я бы хотел, чтобы у круга был зеленый цвет фона, а в автономном - красный.Вот мой нахальный код для этой части.Members - это ul, а member-info - это 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; }

                    }
                }
            }

Заранее благодарен за любые предложения.

Ответы [ 2 ]

0 голосов
/ 24 мая 2018

Попробуйте это: 

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;
  }
}

Есть несколько вещей, которые я рекомендую.

Подумайте о наличии "по умолчанию""состояние для ваших компонентов, а затем условно применяя модификатор.Вместо ... 

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

... попробуйте трактовать "offline" как состояние по умолчанию, а затем условно добавить "online" в качестве единственного модификатора.

Есть очень легкий пакет(с нулевыми зависимостями) называется Имена классов .Это позволяет вам легче создавать строки условных классов: 

import classNames from "classnames";

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

Имея только состояние по умолчанию и измененное состояние, я могу удалить половину этого SASS выше.Предположим, что «круг» сам по себе означает автономный режим, а «круг - онлайн» означает онлайн: 

.circle {
  color: red;

  &--online {
    color: green;
  }
}

Это соглашение об именах с двойными черточками называется BEM , и это очень хорошо подходит для SASS.

0 голосов
/ 24 мая 2018

Я видел этот синтаксис, использованный ранее: 

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

Надеюсь, это поможет:)

...