reactjs - 在树数据结构上使用递归函数嵌套material-ui表，如何对齐列？

Question

我有一个嵌套的 material-ui，其代码在此处显示任务的待办事项列表的表。我使用树结构来存储任务及其子任务等。我遇到的问题是表格的列彼此不对齐或标题不对齐，我相信这是由于 tableRow 和 Collapse 组件周围的 div 标签以及可能是折叠组件，但是我不确定如何重写没有这个的代码，因为函数必须为任务数据呈现一行，并在折叠组件中的任务子级上递归运行函数以呈现它们。

Answer 1

我在这里实施了一个效果很好的解决方案。

表行的这个特定函数中存在 2 个问题：

function treeTable(taskTree) {
    return taskTree.children.map(task => (
      <div>
        <TableRow hover key={task.value.id}>
          {headers.map(({ key, format = value => value }) => (
            <TableCell>{format(task.value[key])}</TableCell>
          ))}
          <TableCell padding="default">
            {task.children.length > 0 ? (
              <Button
                key={task.value.id}
                onClick={() => handleClick(task.value.id)}
              >
                {state[task.value.id] ? <ExpandLess /> : <ExpandMore />}
              </Button>
            ) : null}
          </TableCell>
        </TableRow>
        <Collapse
          key={task.value.id}
          // component="table"
          in={state[task.value.id]}
          timeout="auto"
          unmountOnExit
        >
          {treeTable(task)}
        </Collapse>
      </div>
    ));
  }

问题1：表格行和折叠元素的包裹破坏了表格组件的连续性（必须一个接一个地出现，没有另一个组件在外面）。这里的解决方案很简单，将 div 替换为 React.fragment。

问题2：折叠组件也打破了表格组件的这种连续性。如果将单元格的内容放在折叠组件中，那么它们会适当地折叠。

这个解决方案的另一个方面是它现在意味着必须将折叠元素的状态键作为参数传递到函数中，顶层的父键在第一次加载反应时创建并设置为 true组件，当该状态未定义时。

为了使行折叠，还必须将道具添加style={{ padding: 0 }}到包含折叠组件的任何单元格（如果在展开行时需要更多填充，则需要添加条件填充。

现在改进的功能如下：

function treeTable(taskTree, collapseId) {
    return taskTree.children.map(task => (
      <React.Fragment>
        <TableRow hover key={task.value.id}>
        {headers.map(({ key, format = value => value }) => (
            <TableCell style={{ padding: 0 }}>
              <Collapse
                key={collapseId}
                // component="table"
                in={state[collapseId]}
                timeout="auto"
                unmountOnExit
              >
                {format(task.value[key])}
              </Collapse>
            </TableCell>
          ))}
          <TableCell style={{ padding: 0 }}>
            <Collapse
              key={collapseId}
              // component="table"
              in={state[collapseId]}
              timeout="auto"
              unmountOnExit
            >
              {task.children.length > 0 ? (
                <Button
                  key={task.value.id}
                  onClick={() => handleClick(task.value.id)}
                >
                  {state[task.value.id] ? <ExpandLess /> : <ExpandMore />}
                </Button>
              ) : null}
            </Collapse>
          </TableCell>
        </TableRow>
        {treeTable(task, task.value.id)}
      </React.Fragment>
    ));
  }