React项目中如何在Material UI DenseTable单元格指定位置添加换行

核心思路：将课程字符串中/的位置替换为换行标识，有3种常用实现方式可选：

方案1：最小改动（无需修改原有函数逻辑） #

直接修改DenseTable组件中课程列的渲染代码，拆分字符串后逐行渲染：

// 找到原来的课程列TableCell，替换为以下代码
<TableCell align="right">
  {row.curso.split('/').map((item, index) => (
    <React.Fragment key={index}>
      {item}
      {index < row.curso.split('/').length - 1 && <br />}
    </React.Fragment>
  ))}
</TableCell>

方案2：逻辑优化（复用性更高） #

修改cursoSigla函数，直接返回带换行标签的JSX元素，所有调用该函数的场景都可以直接生效：

function cursoSigla(cursos) {
  if (!cursos?.length) return '';
  return cursos.map((curso, idx) => (
    <React.Fragment key={idx}>
      {`${curso.sigla} - ${curso.ano}º Ano`}
      {idx < cursos.length - 1 && <br />}
    </React.Fragment>
  ));
}

修改后原有单元格的渲染代码无需改动。

方案3：CSS快速实现 #

通过换行符+CSS属性实现，不需要操作JSX元素：

1. 先修改cursoSigla函数中的拼接规则，把/替换为换行符\n：

// 把原来的 return sigla.join('/') 改成
return sigla.join('\n');

2. 给课程列的TableCell添加CSS属性识别换行符：

<TableCell align="right" sx={{ whiteSpace: 'pre-line' }}>{row.curso}</TableCell>

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