Визуализация таблицы, где каждая ячейка соответствует элементу с Material-UI в React.js - PullRequest
Новая
       12

Визуализация таблицы, где каждая ячейка соответствует элементу с Material-UI в React.js

0 голосов
/ 04 апреля 2019

Так что мне нужно составить таблицу, где каждому продукту соответствует клетка; однако в 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 на 5 в конце или, если быть точным, 5 на 10.

Ответы [ 2 ]

0 голосов
/ 04 апреля 2019

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

Выберите реализацию чанка здесь Разделите массив на чанки

0 голосов
/ 04 апреля 2019

Вы можете проверить некоторые примеры на сайте 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>
...