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

Question

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

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

我正在使用 Material UI 步进器尝试呈现下面的步骤标签

<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
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>

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

How to display nested labels in multiple lines?

javascript

arrays

javascript-objects

reactjs

material-ui