Блог

Главная - Вопросы по программированию - Логический оператор || не выводит все (JSX)

Логический оператор || не выводит все (JSX)

#reactjs #conditional-statements #jsx #logical-operators

#reactjs #условные операторы #jsx #логические операторы

Вопрос:

Насколько я понимаю, если любое из условий «MobileNumber» или «AuthUser» имеет значение true, должно быть выведено все, что находится в ()

 <>
  {mobileNumber amp;amp;(
              <List.Item>
                  <Icon 
                  className="phone icon" 
                  />
                  <ListContent>
                      {mobileNumber}
                  </ListContent>
              </List.Item>
  )}
</>

Выше все выводится правильно

 <>
  {mobileNumber || AuthUser(
              <List.Item>
                  <Icon 
                  className="phone icon" 
                  />
                  <ListContent>
                      {mobileNumber}
                  </ListContent>
              </List.Item>
  )}
</>

Это, если оба имеют значение true, выводит {MobileNumber} внутри ListContent, но значок (и, по-видимому, все остальное в paranthesis ) исчезает

Почему это? Могу ли я это исправить? Я исследовал здесь и в Интернете, все говорит о том, что если либо из них истинно, выводится то, что находится в парантезе.

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

1. Что такое AuthUser(... fn?

2. Константа, указывающая, вошел ли пользователь в систему или нет. const { AuthUser } = useContext(AuthContext);

3. Тогда я вижу, {mobileNumber || AuthUser(.. правильно?

4. Да, это правильно

Ответ №1:

вы должны обернуть or вычисление выражения, за которым следует amp;amp; оператор, например {( conditionA || conditionB ) amp;amp; (<>your content</>) :

 {(mobileNumber || AuthUser) amp;amp; (
              <List.Item>
                  <Icon 
                  className="phone icon" 
                  />
                  <ListContent>
                      {mobileNumber}
                  </ListContent>
              </List.Item>
  )}