Рендеринг и группировка с использованием таблиц React

Я создаю динамическую таблицу, используя реакцию на основе объектов.

Проблема в том, что я пытаюсь отобразить новую строку для каждых трех TD, но вместо этого отображаются все TD в одной и той же строке таблицы (tr).

Как я могу разделить ТД на новые ТР после заполнения группы из 3 ТД?

Вот мой код:

Таблица рендеринга компонентов:

`экспортный список классов расширяет React.Component{

render(){
    return(
        <div id = "tab">
            <table >
                <tbody>
                    <tr>
                        <td colSpan = {3}>
                            <h4>Goalkeepers</h4>
                        </td>
                    </tr>
                </tbody>

                <Goalies/>
        </div>
    )
}

}`

Компонент перебирает объект:

`класс Goalies расширяет React.Component{

getTable() {
    let td_array = [];
    let goal_object = {};

    Object.keys(goalies).forEach(function(key) {
        goal_object = (goalies[key]);
      });

    for(const checker in goal_object){
        td_array.push(<td key = {checker}>{goal_object[checker].p_name} <br/> {goal_object[checker].city} <br/> {goal_object[checker].number}</td>);
    }

    return(
        <tr>
            {td_array}
        </tr>
    )
}

  render() {
    return (<tbody>{this.getTable()}</tbody>)
  }

}`

Объекты:

экспорт константной деф = { 1: { p_name:"p1", номер 2, город: "город1" },

2:{
    p_name:"p2",
    number: 5,
    city: "city2"
},

3:{
    p_name:"p3",
    number: 3,
    city: "city3"
},

4:{
    p_name:"p4",
    number: 7,
    city: "city4"
},

5:{
    p_name:"p5",
    number: 15,
    city: "city5"
},

6:{
    p_name:"p6",
    number: 21,
    city: "city6"
}

}

Я хочу получить:

тд1 тд2 тд3 тд4 тд5 тд6

вместо этого я получаю:

тд1 тд2 тд3 тд4 тд5 тд6

Я пытался использовать условные операторы, вставляя в новый массив...

Таблицы предназначены для табличных данных, где существует значимая связь между всеми ячейками в строке и значимая связь между всеми элементами в столбце. Кажется, вам нужна сетка, которую можно было бы легче получить, используя модель отображения сетки или flexbox.

tao 09.02.2023 21:38

Так что в основном использовать функцию карты для размещения информации?

Renan Mougenot 09.02.2023 22:22

Да, вы добьетесь этого, поместив все элементы в гибкий div, где у детей будет ширина 33%, а у родителя будет flex-wrap: wrap. Не нужно группировать их в <tr>s. Используйте таблицы только для табличных данных.

tao 09.02.2023 22:37
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
3
53
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Чтобы добиться нужного вам макета, правильная разметка HTML будет выглядеть так:

<table>
  <thead>
    <tr>
      <th colspan = "3">
        <h4>Goalkeepers</h4>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>td1</td>
      <td>td2</td>
      <td>td3</td>
    </tr>
    <tr>
      <td>td4</td>
      <td>td5</td>
      <td>td6</td>
    </tr>
  </tbody>
</table>

Во-первых, вы захотите сгруппировать свои элементы в массивы n (3 в вашем случае). Я бы использовал функцию генератора:

function* toChunks(arr, n) {
  for (let i = 0; i < arr.length; i += n) {
    yield arr.slice(i, i + n)
  }
}
const rows = [...toChunks(items, 3)]

В качестве альтернативы вы также можете использовать:

const chunk = (arr, n) =>
  [...Array.from({ length: Math.ceil(arr.length / n) }).keys()].map((key) =>
    arr.slice(key * n, (key + 1) * n)
  )
const rows = chunk(items, 3)

Учитывая приведенные выше строки, ваш компонент будет выглядеть так:

const Goalies = ({ rows }) => (
  <tbody>
    {rows.map((row, rk) => (
      <tr key = {rk}>
        {row.map((cell, ck) => (
          <td key = {ck}>{cell.number}</td>
        ))}
      </tr>
    ))}
  </tbody>
)

Демо здесь


Однако, глядя на ваши данные, я думаю, что вам вообще не следует использовать здесь <table>. Макет, который вам нужен, может быть легче достигнут с помощью:

const Cells = ({ items }) => (
  <div className = "myWrapper">
    {items.map((item, key) => (
      <div key = {key}>{item.number}</div>
    ))}
  </div>
)

вместе с любой из следующих моделей CSS:

.myWrapper {
  display: flex;
  flex-wrap: wrap;
}
.myWrapper > * {
  width: calc(100%/3)
}

/* or alternatively: */
.myWrapper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr))
}

тот на самом деле совершенен и достиг того, что я искал. Большое спасибо

Renan Mougenot 09.02.2023 23:56

Другие вопросы по теме