React表使用钩子展开和折叠行

Question

我在项目中使用了react表组件。行扩展属性是我的功能所利用的，它现在运行良好。

我需要在展开一行时折叠所有行的能力。一次只能开一排。我确实浏览了许多文档和stackoverflow链接，但都没有成功。请注意，此实现使用了钩子。就像这里提到的那个：https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/expanding

默认情况下，它们允许一次打开多行，但我需要实现相反的功能。

我最接近的是：使用钩子自动扩展行和子行反应表

但这里是在初始负载时打开的。

感谢

Answer 1

我在这里只添加了App函数的一部分。Codesandbox：https://codesandbox.io/s/jolly-payne-dxs1d?fontsize=14&隐藏导航=1&主题=黑暗。

注意：我不习惯反应表库。此代码是一个示例，仅适用于具有两级行的表。您可以通过递归或其他方式优化代码，使代码在多级表中工作。

Cell: ({ row, rows, toggleRowExpanded }) =>
// Use the row.canExpand and row.getToggleRowExpandedProps prop getter
// to build the toggle for expanding a row
row.canExpand ? (
<span
{...row.getToggleRowExpandedProps({
style: {
// We can even use the row.depth property
// and paddingLeft to indicate the depth
// of the row
paddingLeft: `${row.depth * 2}rem`
},
onClick: () => {
const expandedRow = rows.find(row => row.isExpanded);
if (expandedRow) {
const isSubItemOfRow = Boolean(
expandedRow && row.id.split(".")[0] === expandedRow.id
);
if (isSubItemOfRow) {
const expandedSubItem = expandedRow.subRows.find(
subRow => subRow.isExpanded
);
if (expandedSubItem) {
const isClickedOnExpandedSubItem =
expandedSubItem.id === row.id;
if (!isClickedOnExpandedSubItem) {
toggleRowExpanded(expandedSubItem.id, false);
}
}
} else {
toggleRowExpanded(expandedRow.id, false);
}
}
row.toggleRowExpanded();
}
})}
>
{row.isExpanded ? "👇" : "👉"}
</span>
) : null