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

Question

我在我的项目中使用了 react-table 组件。行扩展属性是我使用的功能，现在工作正常。

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

默认情况下，它们允许一次打开多行，但我需要执行相反的操作。

我最接近的是：

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

谢谢

Answer 1

我这里只添加了一部分App功能。代码沙盒：https://codesandbox.io/s/jolly-payne-dxs1d?fontsize=14&hidenavigation=1&theme=dark。

注：不习惯react-table库。此代码是仅适用于具有两层行的 table 的示例。您可以使用递归或其他方式优化代码，使代码在多级 tables 中工作。

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

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

React Table using hooks expand and collapse rows

reactjs

react-hooks

react-table

react-table-v7