javascript - 根据状态在特定表格单元格中显示 "Task"。响应式JS

Question

我遇到了一个问题，我需要将我的任务对象输出到一个表中。我已经创建了状态列(新的、待办事项、进行中等)，但我不知道如何根据其状态将我的任务输出到特定的表格单元格中，以及是否会有两个具有相同状态的任务对象然后对于另一个，我想创建一个单独的行，这样它们就不会都在同一个单元格中。

不幸的是，我无法提供任何代码示例，因为我已经尝试了很多方法，但都没有奏效。这是我现在的做法，但它无法按我的需要工作。

            <div className="taskboard">
            <table className="table" id={'board_'+this.amount}>
                <tbody>
                    <tr>
                        <th className="0">Story</th>
                        <th className="1">New</th>
                        <th className="2">To do</th>
                        <th className="3">Pending</th>
                        <th className="4">In progress</th>
                        <th className="5">Internal Review</th>
                        <th className="6">Customer Review</th>
                        <th className="7">Done</th>
                        <th className="8">Reject</th>
                    </tr>
                    <tr>
                        {this.tasks.map((task, i) => <td key={i}><Task task={task}/></td>)}
                    </tr>
                </tbody>
            </table>
        </div>

Answer 1

这个怎么样？这个想法是为每个任务创建一个 <tr/> , 然后在里面你决定是否显示 <Task />在 <td /> 里面基于任务的状态(新的、待定的等)。

< div className = "taskboard" > 
  <table className="table" id={'board_' + this.amount}>
    <tbody>
      <tr>
        <th className="0">Story</th>
        <th className="1">New</th>
        <th className="2">To do</th>
        <th className="3">Pending</th>
        <th className="4">In progress</th>
        <th className="5">Internal Review</th>
        <th className="6">Customer Review</th>
        <th className="7">Done</th>
        <th className="8">Reject</th>
      </tr>
      
      {this.tasks.map((task, i) => 
        <tr>
          // maybe here insert some cells that are common for all task states. like name, date, etc.
          // then choose which state to put the task into:
          <td>
            { task.status === "New" &&
              <Task task={task}/>
            }
          </td>
          <td>
            { task.status === "Pending" &&
               <Task task={task}/> 
            }
          </td>
          // more <td />
        </tr>
      )
      }
      
    </tbody>
  </table> 
< /div>

最终你可以重构整个 <tr />进入接收任务对象并显示包含相关单元格的行的新组件