反应中的条件运算符不适用于css答案

【问题标题】：conditional operator in react not working with css反应中的条件运算符不适用于css
【发布时间】：2022-01-27 13:21:09
【问题描述】：

在我的父 div 上的任务组件中，我试图做到这一点，所以当提醒设置为 true 时，它会向 div 添加一个“提醒”类，它只是向左添加一个边框。如果提醒设置为 false，则不会添加“提醒”类。

我已经检查并双击提醒确实在真假之间切换，所以我知道它有效。


const Task = ({ task, onDelete, onToggle }) => {
    return (
        <div
            className={`task ${task.reminder ?
                'reminder' : ''}`}
            onDoubleClick={() => onToggle(task.id)} className="task">
            <h3>{task.text} <FaTimes
                onClick={() => onDelete(task.id)}
                style={{
                    color: "red", cursor: "pointer"
                }} />
            </h3>

            <p>{task.day}</p>
        </div>
    )
}

export default Task


.task {
  background: #f4f4f4;
  margin: 5px;
  padding: 10px 20px;
  cursor: pointer;
  
}

.task.reminder {
  border-left: 5px solid green !important; 
}

【问题讨论】：

标签： javascript html css reactjs web

【解决方案1】：

onToggle，你没有传递 task.remainder ， task.remainder 将如何变化？请在 onToggle 函数中传递 task.remainder 您的代码必须如下所示。

<div className={task ${task.reminder ?'reminder' : ''}} onDoubleClick={() => onToggle(task.remainder)} className="task">

【讨论】：

切换功能正常工作（我也只是尝试了您所说的以确保）。问题是
on true 应该更改为
您是否将任务创建为状态？
是的。 github.com/shayanvalaie/task-manager 如果有帮助，这是完整的代码
@shayanvalaie 你应该像这样添加...` onDoubleClick={()=>onToggle(task.reminder)}`。请更新代码并将github的链接发给我。