如何为激活状态的div添加边框？React场景实现咨询

你需要用React状态来控制持久的选中状态，伪类（hover/active）只能处理临时交互，没法保存选中状态，具体操作如下：

1. 给外层div添加动态类名
   在渲染每个字段容器时，判断当前项是否为选中状态，匹配则添加激活类：

{this.state.fields.map((fields, k) =>
  <div 
    key={k} 
    onClick={() => this.setState({ activeFields: fields })}
    // 动态绑定类名，选中时添加active-container类
    className={this.state.activeFields === fields ? 'active-container' : ''}
  >
    <div className="detailsPage-details" >
      {/* 注意内层key不要重复使用外层的k，改用field自身的唯一标识或索引 */}
      {fields.map((field, fieldIdx) =>
        <p key={fieldIdx}>
          {field.value}: {field.key}
        </p>
      )}
    </div>
  </div>
)}

2. 编写激活状态的CSS样式
   给激活类设置边框样式：

.active-container {
  border: 2px solid #2196f3; /* 自定义边框颜色和粗细 */
  padding: 8px; /* 可选：避免边框紧贴内容 */
  border-radius: 4px; /* 可选：圆角效果 */
}

注意事项 #

• 内层map的key不要复用外层的k，否则会出现React重复key警告，建议使用每个field的唯一标识（比如field.key，如果它是唯一值）或者内层索引fieldIdx。
• 如果fields是复杂对象，判断this.state.activeFields === fields是否能匹配上取决于引用是否一致，这种情况建议给每个fields数组添加唯一ID字段，通过fields.id === this.state.activeFields.id来做对比判断。

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