在ReactJS中呈现2行表

Render 2 table rows in ReactJS

本文关键字：2行表 ReactJS      更新时间：2023-09-26

我想为表实现可扩展的行功能。假设我们有一个包含任务名称和任务复杂度的表。当您单击一个任务时，任务的描述如下所示。我尝试这样做与ReactJS(在渲染方法):

  if (selectedTask === task.id) {
    return [
      <tr>
        <td>{task.name}</td>
        <td>{task.complexity}</td>
      </tr>,
      <tr>
        <td colSpan="2">{task.description}</td>
      </tr>
    ];
  } else {
    return <tr>
      <td>{task.name}</td>
      <td>{task.complexity}</td>
    </tr>;
  }

它不起作用。它说:A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object我还试图在div中包装2行，但我得到错误的渲染。

React组件上的render()方法必须始终返回单个元素。没有例外。

在您的情况下，我建议将所有内容包装在tbody元素中。您可以在不破坏行结构的情况下在表中拥有任意多的这些元素，然后您将始终返回render()中的一个元素。

if (selectedTask === task.id) {
    return (
        <tbody>
            <tr>
                <td>{task.name}</td>
                <td>{task.complexity}</td>
            </tr>,
            <tr>
                <td colSpan="2">{task.description}</td>
            </tr>
       </tbody>
    );
} else {
    return (
        <tbody>
            <tr>
                <td>{task.name}</td>
                <td>{task.complexity}</td>
            </tr>
      </tbody>
    );
}
相关文章：