Question

我正在尝试从this codesandbox了解代码。我已经了解了其中的大部分内容，但是却没有得到这一行：

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

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

编辑：常规回复：

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

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

编辑2：

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

Answer 1

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

Answer 2

这意味着如果document.getElementById("Login_Logout_Time").readOnly = true是真实的，则添加类library(dplyr) df <- data.frame( start = c(12,22,35,49,81,102,120), end = c(18,30,40,70,90,110,124) ) df %>% mutate(difference = start - lag(end), start.1 = lag(start), end.1 = lag(end), start.2 = start, end.2 = end) %>% filter(difference >= 5 & difference <= 10) %>% select(-c(difference, start, end))。如果不是，则不要添加类。因此，如果selected为active，则呈现的HTML输出为：

selected

如果是true或是虚假的：

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

Answer 3

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

Answer 4

这就是这样。

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

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

4 个答案: