React待办应用：基于任务状态的条件渲染实现求助

嗨，这事儿其实挺容易搞定的！我们可以直接在JSX里通过条件判断动态设置className，有几种简洁的写法供你选：

方法1：使用三元表达式（最直接） #

你可以把className的值用三元表达式来动态生成，根据每个task的status决定用style1还是style2，修改后的渲染代码如下：

return (
  <div>
    {/* 优化点：把<ul>放到map外面，避免每个任务都生成单独的列表容器，更符合DOM语义 */}
    <ul>
      {todoList.map((task) => (
        <li 
          className={task.status ? "style1" : "style2"} 
          key={task.description}
        >
          {task.description}
        </li>
      ))}
    </ul>
  </div>
);

方法2：抽成辅助函数（适合复杂逻辑扩展） #

如果以后你的状态判断逻辑变复杂（比如新增更多状态类型），可以把className的判断逻辑抽成一个单独的辅助函数，让代码结构更清晰：

// 定义获取任务类名的辅助函数
const getTaskClassName = (task) => {
  if (task.status) {
    return "style1";
  } else {
    return "style2";
    // 后续新增状态时，直接在这里扩展判断即可
    // 示例：else if (task.status === 'pending') return "style3"
  }
};

// 渲染函数
return (
  <div>
    <ul>
      {todoList.map((task) => (
        <li 
          className={getTaskClassName(task)} 
          key={task.description}
        >
          {task.description}
        </li>
      ))}
    </ul>
  </div>
);

两种方法都能实现你要的差异化渲染效果，选哪种看你当前的需求复杂度就行~

内容的提问来源于stack exchange，提问作者Rhythmic