как отобразить div с несколькими условиями в reactjs

#javascript #reactjs

#javascript #reactjs

Вопрос:

Я пытаюсь отобразить div в соответствии с некоторым условием, но оно не работает должным образом. у меня есть какой-то пользователь, такой как admin и visitor, и еще несколько профилей, и есть еще одно условие, связанное с admin пусть примет это условие IsBusy(логическое значение).

я хочу отображать конкретный div только для администратора и посетителя. и для администратора, когда IsBusy истинно, вот мой код-

 {(user.isAdmin() amp;amp; this.props.isBusy) || user.isVisitor() amp;amp;
<div>
some more code
</div>
}
 

я хочу показать этот div, когда пользователь является администратором, а IsBusy = true или пользователь является посетителем.
эти условия не работают должным образом.

Заранее спасибо

Комментарии:

1. что он показывает, если вы console.log(user.isAdmin(), this.props.IsBusy, user.isVisitor())?

2. не могли бы вы, пожалуйста, объяснить сценарий?. например, каковы другие представления и роли.

3. все они являются логическими

Ответ №1:

Вы можете добавить все условия в одну скобку и попробовать.

 {((user.isAdmin() amp;amp; this.props.isBusy) || user.isVisitor()) amp;amp;
<div>
some more code
</div>
}
 

Ответ №2:

 {(user.isAdmin() amp;amp; this.props.isBusy) || user.isVisitor() amp;amp; (
    <div>
        // code
    </div>
)}
 

Ответ №3:

Ваша ошибка в скобках, подробности см. В примере Пример CodeSandbox

Ответ №4:

Сначала попробуйте отладить значения каждого условия (например isAdmin() , isBusy и isVisitor() ), чтобы увидеть значения, которые они дают. Причина, по которой он не отображает нужный вам div, вероятно, заключается в том, что одно из этих условий не выполняется. Поэтому отладка позволяет вам узнать, что происходит в вашем коде.

Если все значения верны, попробуйте выполнить следующее с помощью тернарного оператора:

 {(user.isAdmin() amp;amp; this.props.isBusy) || user.isVisitor() ? (
 <div>
  // code
 </div>
) : null
}