Рендеринг внутреннего цикла React JSX
Учитывая массив четной длины, я пытаюсь найти чистый метод, используя React, чтобы поместить половину массива в один тег div, а внутри него каждый элемент должен быть в теге span, и то же самое для другой половины. Например, учитывая массив чисел от 1 до 6, визуализированный вывод должен быть:
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<div>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
Основная проблема заключается в работе с JSX в сочетании с JS, я не могу понять, как добиться этого результата, поскольку, похоже, должен использоваться какой-то внутренний цикл, который мешает возвращаемому визуализированному JSX.
Мне также нужно будет расширить это, чтобы выполнять аналогичные функции с разделением массива на разное количество тегов <div>, например. 3 тега <div> по 2 тега <span> в каждом.
Как мы можем добиться этого чистым способом?
Если это проблема макета, возможно, стоит вместо этого использовать CSS Grids, чтобы вам не нужно было вручную разбивать элементы на div.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вы можете сделать это следующим образом:
const arr = [1, 2, 3, 4, 5, 6];
.....
// Inside some JSX components render method
{[arr.slice(0, arr.length / equalParts),
arr.slice(arr.length / equalParts - 1, arr.length)].map(
(half, index) => (
<div key = {`outer_${index}`}>
{half.map((item, index) => (
<span key = {`inner_${index}`}>{item}</span>
))}
</div>
),
)}
Для второй части вопроса вы можете извлечь его в функцию:
const splitAndRender = (arr: number[], equalParts: number) => {
const slices = [];
const innerLength = arr.length / equalParts;
for (let i = 0; i < equalParts; i++) {
slices.push(arr.slice(i * innerLength, (i + 1) * innerLength));
}
return slices.map((half, index) => (
<div key = {`outer_${index}`}>
{half.map((item, index) => (
<span key = {`inner_${index}`}>{item}</span>
))}
</div>
));
};
и используйте функцию, например:
const arr = [1, 2, 3, 4, 5, 6];
.....
{splitAndRender(arr, 3)}
arr.splice() изменяет arr — это не похоже на то, что вы хотели бы использовать в методе рендеринга.
Вы можете использовать _.chunk() из lodash для разделения массива:
const array = [1, 2, 3, 4, 5, 6];
const n=2;
render() {
return _.chunk(array, [size=n]).map(subArray => <div>{subArray.map(i => <span>i</span>}</div>);
}
в React необходимо закрывать встроенные теги, поэтому я нашел только этот (не очень эффективный) способ:
const TMP = ({data,splitby}) => {
let transformedData = data.reduce((r,v,i)=>{
if (i%splitby)
r[r.length-1].push(v)
else r.push([v]);
return r
},[])
return <div>
{
transformedData.map((v,index)=>(
<div key = {`div-$index`}>
{
v.map((s,idx)=> <span key = {`div-${index}-span-${idx}`}>{s}</span>)
}
</div>
))
}
</div>
};
ReactDOM.render(
<TMP data = {Array.from({length: 25}, (v, i) => i)} splitby = {3}/>,
document.getElementById("tmp_root")
);div {
border: 1px solid tomato;
}
span {
display: block;
border:1px solid silver;
}<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 = "tmp_root"></div>
загляните сюда stackoverflow.com/questions/8495687/split-array-into-chunks, чтобы разбить массив данных на более мелкие фрагменты и использовать вложенную карту для рендеринга фрагментов. Если каждый раз это половина массива, вы можете использовать срез массива, используя половину длины массива. Также было бы неплохо увидеть, что вы пробовали конкретно