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

Question

我正在使用 Material UI 中的“Books”表。它有 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)
];

这是完整的代码。

Answer 1

我将创建一个Chapters接受valueprop \xe2\x80\x94的组件value，然后将其转换为array使用split("\\n")并将用于将每个章节显示为列表项。

\n

function Chapters({ value }) {\n  const chapters = value.split("\\n");\n\n  return (\n    <List>\n      {chapters.map((chapter, i) => (\n        <ListItem key={i}>{chapter}</ListItem>\n      ))}\n    </List>\n  );\n}\n

\n

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

\n

...\n{\n  rows.map((row) => {\n    return (\n      <TableRow hover role="checkbox" key={row.annex}>\n        {columns.map((column) => {\n          let value = row[column.id];\n\n          if (column.label === "Chapters") {\n            value = <Chapters value={value} />;\n          }\n\n          return <TableCell key={column.id}>{value}</TableCell>;\n        })}\n      </TableRow>\n    );\n  });\n}\n

\n

\n