Есть входные данные такого вида:
const toothData = [
//1row topleft
{
id: 11,
},
{
id: 12,
},
{
id: 13,
},
{
id: 14,
},
{
id: 15,
},
{
id: 16,
},
{
id: 17,
},
{
id: 18,
},
// 2row topright
{
id: 21,
},
{
id: 22,
},
{
id: 23,
},
{
id: 24,
},
{
id: 25,
},
{
id: 26,
},
{
id: 27,
},
{
id: 28,
},
// 3row bottom-left
{
id: 31,
},
{
id: 32,
},
{
id: 33,
},
{
id: 34,
},
{
id: 35,
},
{
id: 36,
},
{
id: 37,
},
{
id: 38,
},
// 4row bottom-right
{
id: 41,
},
{
id: 42,
},
{
id: 43,
},
{
id: 44,
},
{
id: 45,
},
{
id: 46,
},
{
id: 47,
},
{
id: 48,
},
]
Затем это выводится в такой шаблон
class ToothList extends React.Component {
render() {
const toothTemplate = this.props.data.map(function (item, index) {
return (
<div className="tooth-item" key={index}>
<IconTooth/>
<span>
{item.id}
</span>
</div>
)
})
return (
<div className="tooth-list">
{toothTemplate}
</div>
)
}
}
Как вывести данный массив по 8 айтемов, обернутых в блок (Получается будет 4 строки) ?
const toothData = [
//1row topleft
{
id: 11
},
{
id: 12
},
{
id: 13
},
{
id: 14
},
{
id: 15
},
{
id: 16
},
{
id: 17
},
{
id: 18
},
// 2row topright
{
id: 21
},
{
id: 22
},
{
id: 23
},
{
id: 24
},
{
id: 25
},
{
id: 26
},
{
id: 27
},
{
id: 28
},
// 3row bottom-left
{
id: 31
},
{
id: 32
},
{
id: 33
},
{
id: 34
},
{
id: 35
},
{
id: 36
},
{
id: 37
},
{
id: 38
},
// 4row bottom-right
{
id: 41
},
{
id: 42
},
{
id: 43
},
{
id: 44
},
{
id: 45
},
{
id: 46
},
{
id: 47
},
{
id: 48
}
];
class ToothList extends React.Component {
render() {
const { data } = this.props;
const rows = data.reduce(
(prev, el, i) => {
const subIdx = Math.floor(i / 8);
prev[subIdx] = [...(prev[subIdx] || []), el];
return prev;
},
[]
);
return (
<div className="tooth-list">
{rows.map((row, i) => (
<div key={`row-${i}`} className="tooth-row">
{row.map((item, k) => (
<div className="tooth-item" key={`row-item-${k}`}>
{/* <IconTooth/> */}
<span>{item.id}</span>
</div>
))}
</div>
))}
</div>
);
}
}
class App extends React.Component {
render() {
return <ToothList data={toothData} />;
}
}
ReactDOM.render(<App />, document.getElementById('root'));
.tooth-row {
display: flex;
margin: 1em;
border-radius: 5px;
background-color: lightskyblue;
}
.tooth-row > .tooth-item {
margin: 0.5em;
padding: 0.5em;
border-radius: 5px;
background-color: lavender;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
как вариант - можно добавить перенос строки после каждого восьмого элемента ну или еще что по желанию вместо br :
class ToothList extends React.Component {
render() {
const toothTemplate = this.props.data.map(function (item, index) {
return (
<React.Fragment>
<div className="tooth-item" key={index}>
<IconTooth/>
<span>
{item.id}
</span>
</div>
{index%8===7 ? (<br/>) : null}
</React.Fragment>)
})
return (
<div className="tooth-list">
{toothTemplate}
</div>
)
}
}
Виртуальный выделенный сервер (VDS) становится отличным выбором
Есть canvas, который рисует videoЯ хочу поменять источник видео и пока делаю это просто изменением атрибута src
Мне нужно сформировать отчет Excel и скачать егоДанные берутся из SQL ( примерно 200 тысяч строк на 70 столбиков)
Форма изначально невидима, открывается при нажатии на кнопкуВ форме есть поля, одно из которых input в который нужно вставить дату (каждый раз...