时间戳

首页 > 解决方案 > 使用 reactjs 和 material-ui 在表格单元格中同时包含数据和标签

reactjs - 使用 reactjs 和 material-ui 在表格单元格中同时包含数据和标签

问题描述

我试图在 1 个表格单元格中同时包含数据和链接标签，但我无法让它工作。

我想要的是

我尝试在两者之间添加一个“+”，但它会将其显示为一个对象。

const rows = [
    createData("Created", "last week by @Jacob"),
    createData("Size", "572KB"),
    createData("Tags", "Mileage, Fare, Ticket"),
    createData("Dictionary", "2 files, 16 columns" + <Link>view</Link>)
];

目的

这是我的表格代码。我能知道我应该把它改成什么吗？谢谢！

<Table>
  <TableHead>
    <TableRow>
      <TableCell className={classes.cell}>About this dataset</TableCell>
      <TableCell align="left" className={classes.cell}>
        <Link>Edit</Link>
      </TableCell>
    </TableRow>
  </TableHead>
  <TableBody>
    {rows.map((row) => (
      <TableRow key={row.name}>
        <TableCell align="left" className={classes.cell}>
          {row.x}
        </TableCell>
        <TableCell align="left" className={classes.cell}>
          {row.y}
        </TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>

标签： reactjsmaterial-ui

解决方案

我不确定是做什么createData的，我假设它只是返回一个具有属性name、x和y. 以下是获得所需结果的方法：

  1. 确保您的文件是一个.jsx或.tsx文件。
  2. 传递createDataas的第二个参数
    <>
      {"2 files, 16 columns "}
      <Link>view</Link>
    </>

工作 Codesandbox链接。

推荐阅读