Условно вывести значок для активного / неактивного пользователя - PullRequest
Новая
       34

Условно вывести значок для активного / неактивного пользователя

0 голосов
/ 12 марта 2019

Я пытаюсь условно отобразить значок, основываясь на условии logged пользователя.Если реквизиты, поступающие с сервера, true, то значок зеленый, else серый.

Я пробовал различные решения, от базового if / else в JSX до classNames, но значок не

Мой код: 

              {user.loggedIn ? (
                <div
                  className={classNames('badge badge-pill', {
                    'badge-success': user.loggedIn,
                    'badge-danger': !user.loggedIn
                  })}
                />

Я не вижу ничего плохого в коде.Я имею в виду, что предмет должен быть представлен с несколькими решениями.Любые идеи, что я делаю неправильно. 

              <span
                className={
                  user.loggedIn ? 'badge badge-pill badge-success' : 'badge badge-pill badge-muted'
                }
              />

Я тоже попробовал это.

Я вижу, что элемент в инструментах React-Dev, правильно отображается, с помощьюПравильная опора, но я не вижу ее на экране.

Ответы [ 5 ]

1 голос
/ 12 марта 2019

Ваше содержимое будет отображено, только если пользователь вошел в систему. Также тег div должен быть закрыт внутри условия {isLoggedIn}

вы должны попробовать что-то вроде этого: 

        {user.loggedIn ? (
      <div className={'badge badge-pill badge-success'}>ENTER YOUR CONTENT HERE</div>) : (
            <div className={'badge badge-pill badge-danger'}>ENTER YOUR CONTENT HERE</div>
    )}

но поскольку div самозакрывающийся и не имеет содержимого, он не отображается, поэтому добавьте немного содержимого

1 голос
/ 12 марта 2019

Значок для пользователя, вышедшего из системы, никогда не будет отображаться, если вы поместите условие рендеринга вокруг всего div с помощью user.loggedInd ? (yourComponent...)

0 голосов
/ 12 марта 2019

Проблема с поиском в user.loggedIn не определена или возвращает false 

const loggedIn = true;
<span className={loggedIn ? 'badge-success' : 'badge-muted'}>
Css Change </span>

Codepen

0 голосов
/ 12 марта 2019

Я думаю, что лучше избегать условных в jsx напрямую.Вы можете сделать что-то вроде этого: 

let attachClass = ['badge', 'badge-pill']
   if(user.loggedIn){
      attachClass = [...attachClass, 'badge-success'].join(' ');
   }else{
      attachClass = [...attachClass, 'badge-danger'].join(' ');
   }

Чем вы можете просто вернуть один div с className присоединить класс: 

<div className={attachClass}></div>
0 голосов
/ 12 марта 2019

Если user.loggedIn - логическое значение, то вы можете просто написать 

<div
  className={
    classNames('badge badge-pill', {
      'badge-success': user.loggedIn,
      'badge-danger': user.loggedIn
    })
  }
/>
...