使用Javascript对象中的字符串进行Javascript条件操作

Question

我想了解从代码这个 codesandbox。我已经了解了其中的大部分内容，但是却听不清楚：

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

selected是一个字符串，并且永远不会为空，因此空字符串的真相不适用。那么这行代码如何工作？另外，这是JavaScript怪癖还是react / jsx怪癖？

编辑：一般答复：

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

免责声明：我显然没有JS经验，而且绝对没有React经验。我只是不明白的是，传递一个非null /非空字符串将如何导致一个字符串为空？也许我错过了代码中this.state.selected会在传递时丢失其值的部分？

编辑2：

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

Answer 1

如果selected为true active，则添加类css ；如果为false，则不添加类