React-Bootstrap映射数组生成标签页：无法保持单个标签独立激活

你遇到的问题核心是所有标签和面板共用了同一个eventKey和href，导致点击时所有面板同时触发激活状态。解决思路就是给每个标签和对应的面板分配唯一的标识，让它们一一对应。

具体修改步骤： #

• 利用用户数据中的唯一字段（比如item.id，比循环索引i更可靠，避免数据顺序变化引发的问题）作为每个标签和面板的eventKey
• 同步修改href为和eventKey对应的唯一值（可选，但保持一致性更好）

修改后的代码如下：

左侧标签列表（ListGroup）：

<ListGroup>
  {data.map((item: any) => (
    <ListGroup.Item 
      key={item.id} 
      action 
      eventKey={item.id}
      href={`#user-${item.id}`}
    >
      {item.first_name} {item.last_name}
    </ListGroup.Item>
  ))}
</ListGroup>

右侧内容面板（Tab.Content）：

<Tab.Content>
  {data.map((item: any) => (
    <Tab.Pane key={item.id} eventKey={item.id}>
      {item.company_name} {item.id}
    </Tab.Pane>
  ))}
</Tab.Content>

原理说明： #

React-Bootstrap的Tab组件通过eventKey来匹配激活的标签和面板，当点击带有某个eventKey的标签时，只有拥有相同eventKey的面板会切换到激活状态。用用户的唯一id作为标识，就能保证每个标签和面板一一绑定，实现单次仅激活一个标签页的效果。

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