Question

在React中使用“待办事项”应用程序，并且需要以下帮助：

这是我的带有错误状态为true的任务对象数组：

    let todoList = [
        {description:"Buy new sweatshirt", status: true},
        {description:"Go for a walk", status: false},
    ]

这是我当前的数组渲染功能：

return <div>
{todoList.map((task) => {
   return <ul> 
        <li className="style1" key={task.description}>{task.description}</li>
   </ul> 
})}
</div>

问题：如何实现一种逻辑，使React可以根据状态值来不同地呈现数组描述值（例如，不同的className）？像这样：

if (todoList.status == true){
// className="style1"
<ul> 
    <li className="style1" key={task.description}>{task.description}</li>
</ul> 
} else {
// className="style2"
<ul> 
    <li className="style2" key={task.description}>{task.description}</li>
</ul> 
}

Answer 1

您需要将条件放入mv函数中，以便针对数组的每个项目运行该条件。另外，您不需要为每个分支重复整个元素，只需有条件地设置类名即可。

map

React：待办事项应用的条件渲染

1 个答案: