在React的map遍历中如何按条件动态设置className？

你代码的问题出在条件判断里多写了一层大括号，把item.value包裹成了对象类型：

• 在JS的布尔判断逻辑里，所有对象转布尔值都会是true，哪怕item.value本身是假值，你写的{item.value}作为判断条件时永远返回真，导致hidden类永远不会生效。

把条件里多余的大括号删掉即可，修正后的代码如下：

<div
  className={`${item.value ? "" : "hidden"} fixed inset-0 z-10 bg-gray-900 bg-opacity-95`}
>

如果改完后还存在多个模态框状态联动的问题，要确认你给每个循环项的模态框配置了独立的状态变量：不要所有模态框共用同一个状态，你可以用对象/Map存储所有模态框的显隐状态，取值时用statusMap[item.id]这类和当前循环项唯一标识绑定的写法读取状态即可。

内容的提问来源于stack exchange，提问作者Sanntozzz