Javascript对象中字符串的Javascript条件操作答案

【问题标题】：Javascript Conditional Operation with String from Javascript ObjectJavascript对象中字符串的Javascript条件操作
【发布时间】：2019-11-01 15:40:14
【问题描述】：

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

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

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

编辑：一般回复：

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

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

编辑2：

你们都很好。组件进行了处理，但没有记录此处理，导致混乱。

【问题讨论】：

javascripts 中有一些概念叫做truthy（在bool 比较中翻译为true），falsy（在bool 比较中翻译为false）。如果字符串为空或 null，它将评估为 false 意味着 null 或空是假的
它不是空的或空的，因为 selected 总是分配一个值（名称键的值）。更奇怪的是，如果您从return <MenuItem text={name} key={name} selected = {selected}/>; 中删除选定的道具，仍然会添加活动类，即使不应将任何信息传递给 MenuItem。此外，在 MenuItem 中，我为 selected 添加了一个 console.log ，它甚至不是传入的（字符串），而是出现了一个布尔值。为什么会这样？

标签： javascript reactjs string ecmascript-6 ecmascript-2017

【解决方案1】：

如果selected为真添加类cssactive，如果为假则不添加类

【讨论】：

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

【解决方案2】：

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

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

如果是false 或假：

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

【讨论】：

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

【解决方案3】：

这是一个三元语句，用于检查 selected 是否为 true，如果是，则将其设置为 active，如果不是，则将其设置为空字符串

【讨论】：

【解决方案4】：

这简直就是这样。

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

【讨论】：