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

我明白你的痛点——这个动态key的数据结构确实容易把人绕进去，尤其是当你想把它和Stepper的步骤对应起来的时候。让我们一步步解决这个问题：

问题根源 #

你的stepLabels数组里，每个对象的属性名都是唯一的（labels1、labels2、labels3），而你在代码里直接用item.labels去访问，自然会得到undefined——因为这些对象根本没有叫labels的属性。

解决方案 #

我们需要先提取每个对象里的标签数组，再把它和对应的Step关联起来。这里有两种可行的思路：

思路1：适配现有数据结构渲染 #

因为你的steps数组和stepLabels长度一致（都是3项），可以直接遍历stepLabels来生成Step组件，同时用Object.values(item)[0]提取每个对象里的标签数组（因为每个对象只有一个属性）。

修改后的代码如下：

<Stepper
  alternativeLabel
  activeStep={2}
  connector={
    <StepConnector
      active
      completed
      classes={{
        line: classes.connector,
        active: classes.activeConnector,
        completed: classes.activeConnector
      }}
    />
  }
  className={classes.stepper}
>
  {/* 遍历stepLabels，用索引作为唯一key */}
  {stepLabels.map((item, index) => (
    <Step key={index}>
      <StepLabel classes={{ root: classes.stepLabelRoot }}>
        {/* 提取当前对象的标签数组 */}
        {Object.values(item)[0].map((labelText, labelIndex) => (
          {/* 用block布局让每个标签独占一行 */}
          <span key={labelIndex} style={{ display: 'block' }}>
            {labelText}
          </span>
        ))}
      </StepLabel>
    </Step>
  ))}
</Stepper>

思路2：优化数据结构（更推荐） #

如果可以修改stepLabels的结构，把它改成更直观的二维数组格式，后续维护会更简单：

// 修改后的数据结构
const stepLabels = [
  ['First One'],
  ['Second One', 'second One'],
  ['Third One', 'Third One', 'Third One']
];

这样渲染代码会更简洁清晰：

<Stepper
  // 保持原有配置
>
  {steps.map((_, index) => (
    <Step key={index}>
      <StepLabel classes={{ root: classes.stepLabelRoot }}>
        {stepLabels[index].map((labelText, labelIndex) => (
          <span key={labelIndex} style={{ display: 'block' }}>
            {labelText}
          </span>
        ))}
      </StepLabel>
    </Step>
  ))}
</Stepper>

关键细节说明 #

• Object.values(item)[0]：这个方法会把对象的所有值转换成数组，因为每个对象只有一个属性，取索引0就能拿到对应的标签数组。
• style={{ display: 'block' }}：让每个标签独占一行，实现你要的多行显示效果。
• 索引作为key：如果你的标签内容不会动态变化，用索引作为key是可以接受的；如果后续有增删标签的情况，建议用更唯一的key（比如给每个标签加id字段）。

调试小技巧：如果还是搞不清数据结构，可以在map里加console.log(item)，看看每个item到底是什么，这样就能快速定位问题啦。

内容的提问来源于stack exchange，提问作者Kenny Quach