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

【问题标题】：React: conditional rendering for To-Do appReact：待办事项应用的条件渲染
【发布时间】：2019-04-19 12:32:21
【问题描述】：

在 React 中处理我的 To Do 应用程序并需要以下帮助：

这是我的任务对象数组，状态为真或假：

    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 将根据它们的状态值以不同的方式呈现数组描述值（例如不同的类名）？比如：

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> 
}

【问题讨论】：

这在文档中的Conditional Rendering 中有很好的记录

标签： reactjs

【解决方案1】：

您需要将条件放入您的map 函数中，以便为数组的每个项目运行它。此外，您不需要为每个分支复制整个元素 - 只需有条件地设置类名即可。

// You probably don't want to be rendering a new `ul` for each item!
return <ul> 
  {todoList.map(task => {
    let className = task.status ? "style1" : "style2";
    return <li className={className} key={task.description}>{task.description}</li>;
  })}
</ul>;

【讨论】：