Question

我想为表实现可扩展的行功能。假设我们有一个包含任务名称和任务复杂性的表。单击任务时，任务说明如下所示。我尝试用ReactJS（在render方法中）这样做：

  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行，但渲染错误。请提出正确的解决方案。

Answer 1

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>
    );
}

在ReactJS中渲染2个表行

1 个答案: