在React中在表上创建可扩展行的简单方法是什么？

Question

我尝试查找此内容，但除了库之外，什么都没做，对于这样一个简单的任务来说有点大。我很好奇，是否有人知道表行的onclick事件的简单方法，它将扩展并显示有关该行的信息？

Answer 1

由于它真的很简单，所以在任何库中都可能没有解释。如果切换了该行，则仅显示您感兴趣的信息。在数据源中，每个可扩展行都需要有一个标志。

const [rows, setRows] = useState([
  { ...rowContent, isExpanded: false }
]);

[随后在用户界面中将行映射到内容并呈现它们时，您需要显示一个UI元素，该元素将切换行的isExpanded状态或仅在单击时切换它，其逻辑是相同的。

<div className="row" onClick={() => {
  setRows(rows => {
    const newRows = [...rows];
    newRows[rowIndex].isExpanded = !newRows[rowIndex].isExpanded;
    return newRows;
  });
}>
  {...shortRowContent}
  {rows[rowIndex].isExpanded && (
    {...fullRowContent}
  )}
</div>