我如何解决此错误 <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>

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

</td>

</tr>

</table>

</div>

Answer 2

像这样包装你：

<table>

  <tbody>

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

  </tbody>

</table>