Javascript 添加<；人力资源>；数组最后一项后的标记

我有菜单项列表，我想在数组的最后一项之后添加

标记。我正在映射的列表如下所示：

const checkBoxItems = [
  { value: "pdf", label: "Dashboard as PDF", group: "image" },
  { value: "png", label: "Dashboard as PNG", group: "image" },
  { value: "jpg", label: "Dashboard as JPG", group: "image" },
  { value: "segment", label: "Save selection to segment" },
  { value: "fcsv", label: "Facebook CSV", group: "social" },
  { value: "gcsv", label: "Google Ads CSV", group: "social" },
  { value: "email", label: "E-mail", group: "social" }
];

我想在最后一个项目后面添加

标记，该项目包含组“image”和组“social”。这是我的地图的外观：

返回menuItems.map（（项目，索引）=>(
isCheckboxChecked（item.value）}
>
{item.label}
));

它看起来像这样：

const checkBoxItems = [
  { value: "pdf", label: "Dashboard as PDF", group: "image" },
  { value: "png", label: "Dashboard as PNG", group: "image" },
  { value: "jpg", label: "Dashboard as JPG", group: "image" },
  { value: "segment", label: "Save selection to segment" },
  { value: "fcsv", label: "Facebook CSV", group: "social" },
  { value: "gcsv", label: "Google Ads CSV", group: "social" },
  { value: "email", label: "E-mail", group: "social" }
];

---

任何关于如何实现这一点的想法或代码示例都将受到赞赏。

为了避免依赖已排序的对象，我所做的是找到

image

和

social

的最后实例的索引，并以这种方式执行条件逻辑

const checkBoxItems = [
  { value: "pdf", label: "Dashboard as PDF", group: "image" },
  { value: "png", label: "Dashboard as PNG", group: "image" },
  { value: "jpg", label: "Dashboard as JPG", group: "image" },
  { value: "segment", label: "Save selection to segment" },
  { value: "fcsv", label: "Facebook CSV", group: "social" },
  { value: "gcsv", label: "Google Ads CSV", group: "social" },
  { value: "email", label: "E-mail", group: "social" }
];

let imgIndex;
let socialIndex;

for(let i = 0; i < checkBoxItems.length; i++){
    if (checkBoxItems[i].group === 'image'){
        imgIndex = checkBoxItems.indexOf(checkBoxItems[i])
    }
    if (checkBoxItems[i].group === 'social'){
        socialIndex = checkBoxItems.indexOf(checkBoxItems[i])
    }
}
// this will get you the index of the last element with an 'image' group or a 'social' group
console.log(imgIndex, socialIndex)

return menuItems.map((item, index) => (
if (imgIndex === index || socialIndex === index) {
       <hr>
   } else{
       <StyledMenuItem
       value={item.value}
       selected={item.value === value}
       key={index}
     >
       <Checkbox
         key={index}
         checked={isSelected.includes(item.value.toString())}
         onClick={() => isCheckboxChecked(item.value)}
       >
         <Label>{item.label}</Label>
       </Checkbox>
     </StyledMenuItem>
   }
));

const checkBoxItems=[
{值：“pdf”，标签：“仪表板为pdf”，组：“图像”}，
{值：“png”，标签：“仪表板为png”，组：“图像”}，
{值：“jpg”，标签：“仪表板为jpg”，组：“图像”}，
{值：“段”，标签：“将所选内容保存到段”}，
{值：“fcsv”，标签：“Facebook CSV”，组：“社交”}，
{值：“gcsv”，标签：“谷歌广告CSV”，组：“社交”}，
{值：“电子邮件”，标签：“电子邮件”，组：“社交”}
];
让imgIndex；
让社会主义指数；
for（设i=0；i(
如果（imgIndex==指数| |社会指数===指数）{

}否则{
isCheckboxChecked（item.value）}
>
{item.label}
}
));

我创建了一个示例应用程序，在将数据呈现到DOM之前，我已根据您的要求对数据进行了分组

在下面的示例中，您可以替换

{data.map(d => <p>{d.label}</p>)}

{data.map（d=>{d.label}
）}

与

isCheckboxChecked（item.value）}
>
{item.label}

---

希望这能有所帮助。

您能为您的问题添加一个简化的预期DOM结构以使其更清晰吗？在你对我的答案发表评论之后，我仍然不确定我是否理解。我正试图按照你所写的逻辑来实现这一点，更改

）到
）+
。我会在数组中包含并处理“分隔符”项（解耦总是很好）@Alex你能给我举个例子吗？