Javascript 对来自 Javascript 对象的字符串进行条件运算

Question

我正在尝试理解 this codesandbox 中的代码。我已经理解其中的大部分内容，但我不明白这一行：

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

selected 是一个字符串，它永远不会为空，因此空字符串真理不适用。那么这行代码是如何工作的呢？这也是 javascript 怪癖还是 react/jsx 怪癖？

编辑：一般回复：

虽然它不是空的或 null 因为 selected 总是分配一个值（名称键的值）。更奇怪的是，如果您从 return <MenuItem text={name} key={name} selected = {selected}/>; 中删除选定的道具，活动的 class 仍将被添加，即使没有信息应该传递给 MenuItem。此外，在 MenuItem 中，我为选定项添加了一个 console.log ，它甚至不是传入的内容（字符串），而是一个布尔值。为什么会这样？

免责声明：我在 JS 方面经验不足（显然），在 React 方面绝对没有。我只是不明白的是，传入一个非 null/not 空字符串如何导致字符串为空？也许我遗漏了 this.state.selected 在传递时会丢失其值的代码部分？

编辑 2：

你们都很好。该组件进行了处理，但未记录此处理，从而导致混淆。

Answer 1

如果selected是true加classcssactive,如果false不加class

Answer 2

表示如果selected为真，则加上classactive。如果不是，则不要添加 class。因此，如果 selected 是 true，则呈现的 HTML 输出将是：

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

如果它是 false 或假的：

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

Answer 3

这是一个三元语句，用于检查 selected 是否为真，如果是，它将被设置为活动，否则将被设置为空字符串

Answer 4

简直就是这样

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

Javascript 对来自 Javascript 对象的字符串进行条件运算

Javascript Conditional Operation with String from Javascript Object

javascript

string

ecmascript-6

reactjs

ecmascript-2017