ReactJS报错：非布尔属性className接收到false值如何解决？

你使用的todo.completed && "complete"短路表达式存在逻辑缺陷：当todo.completed为false时，整个表达式直接返回布尔值false。className属于接收字符串值的非布尔属性，React不支持给这类属性传入布尔值，因此触发报错。

根据你的使用场景，可以任选以下方案修改：

• 方案1：三元表达式兜底（最常用、可读性最高）
  将li标签的className属性修改为三元写法，不满足条件时返回空字符串：

  <li className={todo.completed ? "complete" : ""}>
  

• 方案2：短路逻辑追加兜底
  保留原有短路写法，补充空字符串兜底逻辑：

  <li className={todo.completed && "complete" || ""}>
  

• 方案3：数组拼接类名（适合多动态类名场景）
  如果后续需要叠加多个动态/固定类名，可以用数组过滤空值后拼接，避免出现多余空格：

  <li className={[todo.completed ? "complete" : ""].filter(Boolean).join(" ")}>
  

内容的提问来源于stack exchange，提问作者Do Duc Thang