如何在多行中显示嵌套标签？

Question

我尝试过使用 map 方法，就像我在研究如何做到这一点时看到的那样，但当我有如下结构时，它似乎不是要使用的方法：

const stepLabels = [
  { labels1: ['First One'] },
  { labels2: ['Second One', 'second One'] },
  { labels3: ['Third One', 'Third One', 'Third One'] }
];

我正在使用 Material UI Stepper 来尝试渲染下面的步骤标签

<Stepper alternativeLabel activeStep={2} connector={<StepConnector active completed classes={{ line: classes.connector, active: classes.activeConnector, completed: classes.activeConnector }} />} className={classes.stepper}>
        {steps.map(label => (
          <Step key={label}>
            <StepLabel classes={{ root: classes.stepLabelRoot }}>
              <span>
                { stepLabels.map(item => item.labels)}
              </span>
            </StepLabel>
          </Step>
        ))}
      </Stepper>

试图得到这个，在每个节点下方，它将显示标签。所以在第一个节点下面，它会说：

下面会显示第一个节点

First One

Second One 将在第二个节点下方显示两次

Second One
Second One

第三个节点会在第三个节点上显示三次

Third One
Third One
Third One

我已经尝试解决这个问题一个小时，但似乎找不到答案。

这样做真的很令人困惑，因为我确实知道如何使用 map 方法，但是这种结构有点令人困惑。我已经进行了反复试验，每次都会遇到不同的错误。像没有定义的东西等等。

Answer 1

如果你想迭代并用它做一些事情，你需要在列表的所有元素中使用相同的属性名称。你的代码：

const stepLabels = [
  { labels1: ['First One'] },
  { labels2: ['Second One', 'second One'] },
  { labels3: ['Third One', 'Third One', 'Third One'] }
];

应改为：

const stepLabels = [
  { labels: ['First One'] },
  { labels: ['Second One', 'second One'] },
  { labels: ['Third One', 'Third One', 'Third One'] }
];

如果要添加换行符，可以添加br元素：

<Stepper alternativeLabel activeStep={2} className={classes.stepper}>
  {stepLabels.map((label) => (
    <Step key={label}>
      <StepLabel classes={{ root: classes.stepLabelRoot }}>
        {label.labels.map((item) => (
          <>
            {item}
            <br />
          </>
        ))}
      </StepLabel>
    </Step>
  ))}
</Stepper>