javascript - react 组件上的“If”简写

我有一个简单的逻辑来检查哪个菜单处于活动状态。

我在用着:

const [activeMenu, setActiveMenu] = useState("0");

为国家。

并使用 if 速记:

  1. className={activeMenu === "2" && "active"}
  2. className={activeMenu === "1" ? "active" : ""}

但第一个给了我:

react_devtools_backend.js:4026 Warning: Received `false` for a non-boolean attribute `className`.

If you want to write it to the DOM, pass a string instead: className="false" or className={value.toString()}.

我的问题是为什么第一个给了我这个警告?但我的网站仍然像魅力一样工作。为什么说收到false

回答1

如果 activeMenu 不是 2,则 className 将为 false(无效)

className={activeMenu === "2" && "active"}

有了这个

className={activeMenu === "2" ? "active" : ""}

如果 activeMenu 不是 2,则 className 将为空字符串(有效)

所以,基本上就像错误所说的那样。 className 不是布尔属性。

在控制台中运行下面的代码,它与您的代码基本相同。它将返回 false

false && "active" !== null