reactjs - Material UI TableCell 无法像列表项一样强制将字符串显示在新行中

Question

我正在使用 Material UI 中的“书籍”表。它有 3 列:“书号”、“标题”和“章节”。我希望每一章都像列表项一样显示在单独的行中，如下所示:
第1章
第2章
第3章
并不是
第一章第二章第三章
我尝试了不同的方法，例如添加“\n”，将其存储在变量中，和/或将其包含在模板文字中，如下所示:

const row2 = "Chapter 1\nChapter 2";
const row4 = `Chapter 1\nChapter 2\nChapter 3`;

const rows = [
  createData("1", "Book 1", "Not Applicable"),
  createData("2", "Book 2", row2),
  createData("3", "Book 3", "Chapter 1\nChapter 2"),
  createData("4", "Book 4", row4)
];

这是完整的 code .

Answer 1

我会创建一个 Chapters接受 value 的组件 Prop — 这个 value然后将转换为 array使用 split("\n")并将用于将每个章节显示为列表项。

function Chapters({ value }) {
  const chapters = value.split("\n");

  return (
    <List>
      {chapters.map((chapter, i) => (
        <ListItem key={i}>{chapter}</ListItem>
      ))}
    </List>
  );
}

然后在我的 columns.map ，我会检查 column.label === "Chapters" ;如果是 true ，我会重新分配 value调用我 Chapters成分。

...
{
  rows.map((row) => {
    return (
      <TableRow hover role="checkbox" key={row.annex}>
        {columns.map((column) => {
          let value = row[column.id];

          if (column.label === "Chapters") {
            value = <Chapters value={value} />;
          }

          return <TableCell key={column.id}>{value}</TableCell>;
        })}
      </TableRow>
    );
  });
}