实现Bootstrap卡片信息切换功能且不影响现有子组件使用

核心逻辑 #

父组件维护一个激活卡片状态，用来记录当前被点击的卡片标识，通过这个状态控制对应InformationData子组件的显隐；子组件完全保留原有逻辑，只需要父组件传递它原本需要的数据即可，完全不影响其在其他场景的使用。

具体实现步骤（以React场景为例） #

1. 父组件定义激活状态 #

在父组件中添加状态变量，跟踪当前选中的卡片：

import { useState } from 'react';

function ParentComponent() {
  // 初始值设为null表示默认不显示任何信息；若需默认显示某张卡片，可改为对应ID（如'card1'）
  const [activeCardId, setActiveCardId] = useState(null);
  
  // 卡片点击处理函数，支持点击同一卡片切换显隐
  const handleCardClick = (cardId) => {
    setActiveCardId(prev => prev === cardId ? null : cardId);
    // 若需求为点击卡片必显示对应信息，可改为：setActiveCardId(cardId)
  };
  
  // 后续渲染代码
}

2. 给Bootstrap卡片绑定点击事件 #

给每张卡片添加点击事件，传递各自的唯一标识：

<div className="row">
  {/* 卡片1 */}
  <div 
    className="col-md-4" 
    onClick={() => handleCardClick('card1')} 
    style={{ cursor: 'pointer' }}
  >
    <div className="card">
      <div className="card-body">
        <h5 className="card-title">卡片1标题</h5>
        <p className="card-text">卡片1描述内容</p>
      </div>
    </div>
  </div>
  
  {/* 卡片2 */}
  <div 
    className="col-md-4" 
    onClick={() => handleCardClick('card2')} 
    style={{ cursor: 'pointer' }}
  >
    <div className="card">
      <div className="card-body">
        <h5 className="card-title">卡片2标题</h5>
        <p className="card-text">卡片2描述内容</p>
      </div>
    </div>
  </div>
  
  {/* 卡片3 */}
  <div 
    className="col-md-4" 
    onClick={() => handleCardClick('card3')} 
    style={{ cursor: 'pointer' }}
  >
    <div className="card">
      <div className="card-body">
        <h5 className="card-title">卡片3标题</h5>
        <p className="card-text">卡片3描述内容</p>
      </div>
    </div>
  </div>
</div>

3. 根据激活状态控制子组件显隐 #

这里提供两种不修改子组件的实现方式：

方式一：条件渲染（推荐，减少冗余DOM节点）

仅在选中对应卡片时，渲染其对应的InformationData子组件，传递原有数据即可：

<div className="information-container">
  {activeCardId === 'card1' && <InformationData data={card1Data} />}
  {activeCardId === 'card2' && <InformationData data={card2Data} />}
  {activeCardId === 'card3' && <InformationData data={card3Data} />}
</div>

子组件接收data的逻辑完全不变，其他场景使用时依然可以直接传递数据调用，不受任何影响。

方式二：样式控制显隐（保留DOM节点）

若需保留所有子组件的DOM节点，可通过display样式控制显隐：

<div className="information-container">
  <InformationData 
    data={card1Data} 
    style={{ display: activeCardId === 'card1' ? 'block' : 'none' }} 
  />
  <InformationData 
    data={card2Data} 
    style={{ display: activeCardId === 'card2' ? 'block' : 'none' }} 
  />
  <InformationData 
    data={card3Data} 
    style={{ display: activeCardId === 'card3' ? 'block' : 'none' }} 
  />
</div>

子组件的按钮点击展示逻辑完全不受影响，其他场景使用时无需传递该style属性，功能正常。

4. 可选优化：给激活卡片添加高亮 #

为了提升用户体验，可给当前选中的卡片添加高亮样式：

// 给卡片外层div添加动态类名
<div 
  className={`col-md-4 ${activeCardId === 'card1' ? 'active-card' : ''}`} 
  onClick={() => handleCardClick('card1')} 
  style={{ cursor: 'pointer' }}
>

对应的CSS样式：

.active-card .card {
  border-color: #0d6efd;
  box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
}

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