我如何解决此错误 <tr> 不能作为 <div> 的子项出现

Question

todoList() {

return this.state.todos.map(function(element,i){

    return <div todo={element} key = {i}>;

    <tr>

    <td>{element.todo_description}</td>

    <td>{element.todo_responsible}</td>

    <td>{element.todo_priority}</td>

    <td>

        <Link to={"/edit/"+element._id}>Edit</Link>

    </td>

</tr>

</div>

})

}

render(){

    return(

       <div> 

          <h2>To Do List</h2>

          <table className="table table-striped" style={{ marginTop: 20 }}>

              <thead>

                  <tr>

                      <th>Description</th>

                      <th>Responsible</th>

                      <th>Priority</th>

                      <th>Action</th>

                  </tr>

              </thead>

              <tbody>

                  {this.todoList()}

              </tbody>

          </table>

        </div>

    )

}

}

export default toDosList;

Answer 1

tr 标签是 table 标签的子标签，所以你应该在 div 之后添加一个 table 标签，如下所示：<div todo={element} key = {i}>;<table><tr><td>{element.todo_description}</td><td>{element.todo_responsible}</td><td>{element.todo_priority}</td><td>&nbsp; &nbsp; <Link to={"/edit/"+element._id}>Edit</Link></td></tr></table></div>

Answer 2

像这样包装你：<table>&nbsp; <tbody>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td>{element.todo_description}</td>&nbsp; &nbsp; &nbsp; <td>{element.todo_responsible}</td>&nbsp; &nbsp; &nbsp; <td>{element.todo_priority}</td>&nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; <Link to={`/edit/${element._id}`}>Edit</Link>&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; </tr>&nbsp; </tbody></table>