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

Question

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

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

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

编辑:一般回应:

它不为空或 null，因为 selected 总是分配一个值(名称键的值)。更奇怪的是，如果你从return <MenuItem text={name} key={name} selected = {selected}/>;中删除选定的 Prop ，即使没有信息应该传递给 MenuItem，事件类仍然会被添加。另外，在 MenuItem 中，我为 selected 添加了一个 console.log ，它甚至不是传入的内容(字符串)，而是出现了一个 bool 值。为什么会发生这种情况？

免责声明:我在 JS 方面没有那么丰富的经验(显然)，而且在 React 方面也绝对没有经验。我只是不明白的是，传入非空/非空字符串将如何导致字符串为空？也许我遗漏了 this.state.selected 在传递时会丢失其值的代码部分？

编辑2:

你们都还好。该组件进行了处理，但该处理没有记录下来，导致困惑。

Answer 1

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