React Accordion组件指定位置加分隔符的索引异常问题解决

你的问题出在拆分数组后第二个map生成的index重置为0，导致传递给AccordionItem的索引和原数组真实索引不匹配，和上下文维护的activeItemIndex冲突，出现错误激活的情况。

直接在单个map循环内判断位置渲染分隔符即可解决，不需要拆分数组：

方案一：根据item的label判断（更灵活，不受数组顺序影响） #

<Accordion>
  {items.map((item, index) => (
    <React.Fragment key={item.id}>
      <AccordionItem key={item.id} item={item} index={index} />
      {/* 在label为"Two"的项后插入分隔符 */}
      {item.label === "Two" && <hr />}
    </React.Fragment>
  ))}
</Accordion>

方案二：根据数组索引判断（依赖数组顺序） #

如果确定"Two"始终是第二个元素（索引为1），可以用索引判断：

<Accordion>
  {items.map((item, index) => (
    <React.Fragment key={item.id}>
      <AccordionItem key={item.id} item={item} index={index} />
      {/* 在第二个元素后插入分隔符 */}
      {index === 1 && <hr />}
    </React.Fragment>
  ))}
</Accordion>

方案优势 #

• 保持AccordionItem的index与原数组真实索引一致，完全匹配上下文的activeItemIndex，不会出现索引混乱问题。
• 使用React.Fragment包裹，不会额外生成多余DOM节点，避免破坏Accordion组件的结构逻辑。
• 代码简洁直接，无需拆分数组，维护性更强。

内容的提问来源于stack exchange，提问作者JarochoEngineer