Я создаю динамическую таблицу, используя реакцию на основе объектов.
Проблема в том, что я пытаюсь отобразить новую строку для каждых трех 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"
}
}
Я хочу получить:
вместо этого я получаю:
Я пытался использовать условные операторы, вставляя в новый массив...
Так что в основном использовать функцию карты для размещения информации?
Да, вы добьетесь этого, поместив все элементы в гибкий div, где у детей будет ширина 33%, а у родителя будет flex-wrap: wrap
. Не нужно группировать их в <tr>
s. Используйте таблицы только для табличных данных.
Чтобы добиться нужного вам макета, правильная разметка 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))
}
тот на самом деле совершенен и достиг того, что я искал. Большое спасибо
Таблицы предназначены для табличных данных, где существует значимая связь между всеми ячейками в строке и значимая связь между всеми элементами в столбце. Кажется, вам нужна сетка, которую можно было бы легче получить, используя модель отображения сетки или flexbox.