Условная операция Javascript со строкой из объекта Javascript

Question

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

return <div className={`menu-item ${selected ? "active" : ""}`}>{text}</div>;

selected - это строка, и она никогда не бывает пустой, поэтому истинность пустой строки не применяется. Так как же работает эта строка кода? Также это причуда javascript или причуда реакции / jsx?

Edit: Общий ответ:

Это не пусто и не равно нулю, потому что выбранному всегда присваивается значение (значение ключа имени). Еще более странно то, что если вы удалите выбранную подпорку из return <MenuItem text={name} key={name} selected = {selected}/>;, активный класс все равно будет добавлен, даже если никакая информация не будет передана в MenuItem. Кроме того, в MenuItem я добавил console.log для выбранного, и это даже не то, что передано (строка), а скорее логическое значение. Почему это происходит?

Отказ от ответственности: Я не настолько опытен в JS (очевидно) и определенно не в React. Что я просто не понимаю, так это то, что передача непустой / не пустой строки приведет к тому, что строка будет пустой? Возможно, мне не хватает той части кода, где this.state.selected будет терять свое значение при передаче?

Редактировать 2:

У вас все было хорошо. Компонент выполнил обработку, но эта обработка не была задокументирована, что привело к путанице.

Answer 1

, если selected - true, добавить класс css active, если false - не добавить класс

Answer 2

это троичный оператор, который проверяет, является ли выбранным значение true, если это так, он будет установлен активным, если нет, то будет установлен пустой строкой

Answer 3

Это означает, что если selected верно, то добавьте класс active.Если это не так, не добавляйте класс.Поэтому, если selected равно true, выводимый HTML-код будет:

<div class="menu-item active">Text</div>

Если это false или ложь:

<div class="menu-item">Text</div>

Answer 4

Это просто так.

let className = "menu-item ";
if (selected) {
  className = className + "active"
}
console.log(className);