文章/答案/技术大牛

发布

社区首页 >问答首页 >react中的条件运算符不使用css

问react中的条件运算符不使用css
EN

Stack Overflow用户

提问于 2021-12-29 03:06:02

回答 2查看 82关注 0票数 1

在父div上的任务组件中，我试图使它成为true，因此当提醒设置为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; 
}

html

css

reactjs

web

javascript

回答 2

Stack Overflow用户

发布于 2021-12-29 03:22:22

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

<div className={任务${task.reminder？‘task.reminder’：''}} onDoubleClick={() => onToggle(task.remainder)} className="task">

票数 0

Stack Overflow用户

发布于 2022-01-05 19:17:32

我认为您在div元素中添加了2次className，删除第二个元素，然后您将得到结果。实际上，您的逻辑是正确的，但是您做了2次添加className的小错误。

顺便说一句，有两种实现逻辑的方法-

className={`${task.reminder ? 'task reminder' : 'task'}`}

className={`task ${task.reminder ? 'reminder' : ''}`}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70514757

复制

相似问题

问react中的条件运算符不使用css
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问react中的条件运算符不使用cssEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问react中的条件运算符不使用css
EN