Question

因此，我需要创建一个表格，其中每个产品对应一个单元格；但是，当我不关闭返回的JSX中的标签时，JSX会阻止我返回jsx。我不确定是否有其他方法，但是似乎我处于一种绑定状态，因为错误消息没有意义，而且我得到了意外的令牌之类的信息。

试图在回调内返回带地图的JSX，但看来我做不了想要的事情。

       {props.products.slice(0, 50).map((element, i) => {
          console.log(element.name);
          if (i % 5 == 0) {
            return (
              <TableRow>
                <TableRowColumn>{element.name}</TableRowColumn>
            )

          } else if (i % 5 == 4) {

            return (
                <TableRowColumn>{element.name}</TableRowColumn>
              </TableRow>
            )

          } else {

            return (
                <TableRowColumn>{element.name}</TableRowColumn>
            )

          }

        })}

我希望每一行有5列，每个单元格包含一个产品，而表则包含50个元素。基本上，我想关闭5列之后的行。

我希望最后有一个5 x 5的桌子，或者确切地说是5 x 10的桌子。

Answer 1

您可以在material-ui网站（https://material-ui.com/demos/tables/）上查看一些示例

如果您知道哪些元素是标题名称，则可以在产品上使用for循环来创建列名称，例如

<TableRow>
  {props.products.map((product, index) => {
    if (index % 5 === 0) {
      return <TableCell>{product.name}</TableCell>;
    }
  }
</TableRow>

Answer 2

JSX不是HTML，因此您无法制止标记对。

正确的解决方案应该是这样

function chunker(array, length) {
   // select proper implementation on the link below
   return []
}
{chunker(props.products.slice(0, 50)), 5).map((chunk) => {
  if (chunk.length !== 5) {
    console.warn('not full chunk', chunk)
  }
  return (
    <TableRow>
      {chunk.map((element, i) => {
        console.log(element.name);
        return (
          <TableRowColumn>{element.name}</TableRowColumn>
        )
      })}
    </TableRow>
  )
})}

在Split array into chunks

处选择块实现

渲染一个表格，其中每个单元格对应于React.js中material-ui的元素

2 个答案: