时间戳

首页 > 解决方案 > 在 React.js 中渲染一个表格，其中每个单元格对应一个带有 material-ui 的元素

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

问题描述

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

试图在回调中返回带有 map 的 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 的桌子。

标签： reactjsmaterial-ui

解决方案

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>
  )
})}

在此处选择块实现将数组拆分为块

推荐阅读