如何在Material-UI表格单元格中用换行格式化数组值？

问题场景 #

需要在Material-UI表格中展示Name和People两列，其中People列对应数组数据，要求数组内元素换行显示。预期效果如下：

Name             People
---------------- -----------------------
A                Name: Fred  Likes: Apples
                 Name: John  Likes: Pears
                 Name: Sally  Likes: Pineapple
B                Name: Freddie  Likes: Basketball
                 Name: Sallie  Likes: Sports

给定数据：

let myArr = [
  {
    id: 1,
    name: "A",
    people: [ { myId: 2, myName: "Name: Fred  Likes: Apples" },
              { myId: 3, myName: "Name: John  Likes: Pears" },
              { myId: 4, myName: "Name: Sally  Likes: Pineapple" } ] 
  },
  {
    id: 2,
    name: "B",
    people: [ { myId: 12, myName: "Name: Freddie  Likes: Basketball" },
              { myId: 14, myName: "Name: Sallie  Likes: Sports" } ] 
  }
]

你编写的代码：

<TblContainer>
  <TblHead />
  <TableBody>
    {myArr.map((rec) => (
      <TableRow>
        <TableCell>{rec.name}</TableCell>
        {rec.people.map((e, index) => (
          <TableCell>
            {
              <span>
                {e.myName}{' '}
                {index < rec.people.length - 1 ? <br /> : ''}
              </span>
            }
          </TableCell>
        ))}
      </TableRow>
    ))}
  </TableBody>
</TblContainer>

实际效果却为元素并排显示：

Name  People
----- -----------------------
A     Name: Fred  Likes: Apples   Name: John  Likes: Pears.  Name: Sally  Likes: Pineapple
B     Name: Freddie  Likes: Basketball.  Name: Sallie  Likes: Sports

错误原因 #

核心问题是你把每个people元素都渲染成了独立的<TableCell>。Material-UI的<TableRow>是横向布局，每个<TableCell>会作为表格的一列存在，多个<TableCell>自然会并排显示，导致换行逻辑完全失效。

解决方案 #

需要将整个People列的内容放在**同一个<TableCell>**内部，在单元格里处理元素的换行逻辑。有两种常用实现方式：

方式1：用块级元素（如div）实现换行 #

<TblContainer>
  <TblHead />
  <TableBody>
    {myArr.map((rec) => (
      <TableRow key={rec.id}> {/* 必须添加key属性，符合React列表渲染规范 */}
        <TableCell>{rec.name}</TableCell>
        <TableCell>
          {rec.people.map((e) => (
            <div key={e.myId}> {/* div是块级元素，默认独占一行 */}
              {e.myName}
            </div>
          ))}
        </TableCell>
      </TableRow>
    ))}
  </TableBody>
</TblContainer>

方式2：用<br/>标签分隔元素 #

<TblContainer>
  <TblHead />
  <TableBody>
    {myArr.map((rec) => (
      <TableRow key={rec.id}>
        <TableCell>{rec.name}</TableCell>
        <TableCell>
          {rec.people.map((e, index) => (
            <span key={e.myId}>
              {e.myName}
              {/* 最后一个元素不添加换行 */}
              {index < rec.people.length - 1 && <br />}
            </span>
          ))}
        </TableCell>
      </TableRow>
    ))}
  </TableBody>
</TblContainer>

进阶：贴合Material-UI样式的实现 #

如果需要更统一的Material-UI风格，可以用<Typography>组件代替div：

<TableCell>
  {rec.people.map((e) => (
    <Typography key={e.myId} variant="body1">
      {e.myName}
    </Typography>
  ))}
</TableCell>

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