Javascript 使用元素数组在React js中创建子菜单

有没有办法在不将数组一分为二并映射的情况下创建以下结构

arrayList=[Jeans, Jackets, Pants, Fragrance, Sunglasses, Health Products]
<div className='Flexbox'>
//arrayList1.map](//arrayList1.map)(x=>return(<li>x</li>))

<div className='first sublist'>

    <li>Jean</li>

    <li>Jackets</li>

    <li>Pants</li>

</div>

<div className='first sublist'>

//arrayList2.map](//arrayList2.map)(x=>return(<li>x</li>))

    <li>Fragrance</li>

    <li>Sunglasses</li>

    <li>Health</li>

</div>

arrayList=[牛仔裤、夹克、裤子、香水、太阳镜、保健品]
//arrayList1.map]（//arrayList1.map）（x=>return（
x
）
琴
夹克衫
裤子
//arrayList2.map]（//arrayList2.map）（x=>返回（
x
）
香味
太阳镜
健康

我不确定，你想要这样的东西吗

{ arrayList.map((item, index) => {
    return (
        (index <= arrayList.length / 2) ?
            <li> {item} </li>
            :
            null
    );
}}

{arrayList.map（（项，索引）=>{
返回(
（索引尝试使用
数组#reduce
分割前两半。然后为父级应用映射，然后为
li应用映射

const arrayList = ['Jeans', 'Jackets', 'Pants', 'Fragrance', 'Sunglasses', 'Health Products'];

let res = arrayList.reduce((acc,curr,ind)=>{
  if(ind%3 == 0){ // splitting into two array
   acc[ind/3] = [];
  }
  acc[acc.length-1].push(curr) // push the value to last created array
  return acc
},[]).map((item)=>(
   <div className="first sublist"> //div wrap
      {item.map(text=>( //for inner text
        <li>text</li>
      ))}
   </div>
))

const arrayList=[“牛仔裤”、“夹克”、“裤子”、“香水”、“太阳镜”、“保健品”]；
让res=arrayList.reduce（（acc，curr，ind）=>{
如果（ind%3==0）{//拆分为两个数组
acc[ind/3]=[]；
}
acc[acc.length-1].push（curr）//将值推送到上次创建的数组
返回acc
}，[]）。地图（（项目）=>(
//div-wrap
{item.map（text=>（//表示内部文本）
正文
))}
))
为什么不想分割数组并在其上进行映射？只想知道是否有任何方法可以仅使用一个循环来解决此问题。使用太多循环是否有效？如何定义循环？如果数组应始终拆分为两部分，并且您知道如何拆分，则可以使用slice将数组拆分为两部分并相互映射，然后拆分g可能不是一个循环？