设计：按层次结构对齐每一行

Question

在所附的屏幕截图中，您将看到审核区域的层次结构，如果您注意到每个审核区域名称中都有一个空格，如果审核区域中有多个关联的关键控制和 SCOTABD，并且当前很难分析如何解决这个问题。

这是当前数据：

[
  {
    title: WARNING_MODAL.TABLE.AUDIT_AREAS,
    parent: ["Audit Area 1", "Audit Area 2"]
  },
  {
    title: WARNING_MODAL.TABLE.SCOTABDS,
    children: [{
      text: "SCOTABD 1",
      parent: "Audit Area 1"
    },
    {
      text: "SCOTABD 2",
      parent: "Audit Area 1"
    },
    {
      text: "SCOTABD 3",
      parent: "Audit Area 2"
    },]
  },
  {
    title: WARNING_MODAL.TABLE.KEY_CONTROLS,
    children: [{
      text: "Key Control Name 1",
      parent: "Audit Area 1"
    },
    {
      text: "Key Control Name 2",
      parent: "Audit Area 1"
    },
    {
      text: "Key Control Name 3",
      parent: "Audit Area 2"
    },
    {
      text: "Key Control Name 4",
      parent: "Audit Area 2"
    }]
  }
]

这是 JSX 代码

{data.map((item) => {
  return (
    <Box>
      <ItemHeading>{item.title}</ItemHeading>
      {item.parent &&
        item.parent.map((parent, index) => (
          <Typography key={index} variant="body1">
            {parent}
          </Typography>
        ))}
      {item.children &&
        item.children.map((child, index) => (
          <Typography key={index} variant="body1">
            {child.text}
          </Typography>
        ))}

    </Box>
  );
})}

我想实现与此问题中附加的相同设计。

目前结果：

Answer 1

转换原始数据并按父级分组。这里有两种可以使用的转换变体：

答：

const data = [{
  [WARNING_MODAL.TABLE.AUDIT_AREAS]: ["Audit Area 1"],
  [WARNING_MODAL.TABLE.SCOTABDS]: ["SCOTABD 1", "SCOTABD 2"],
  [WARNING_MODAL.TABLE.KEY_CONTROLS]: ["Key Control Name 1", "Key Control Name 2"]
},
 // Same here for "Audit Area 2", etc.
];

// Order list, this also is mapped from the original source. Allows you to render the columns in the right order.
const order = [
    WARNING_MODAL.TABLE.AUDIT_AREAS,
    WARNING_MODAL.TABLE.SCOTABDS,
    WARNING_MODAL.TABLE.KEY_CONTROLS
];

乙：

// Transform the data in the right order right away.
const orderedData = [
    [["Audit Area 1"],["SCOTABD 1", "SCOTABD 2"], ["Key Control Name 1", "Key Control Name 2"]],
    // Same here for "Audit Area 2", etc.
];

这样，每个父级（审核区域）和所有相应的子级就各占一行。所有单元格都可以适合行的高度，这样你的问题就解决了，你可以使用 CSS Flexbox 进行良好的对齐。