React Bootstrap手风琴插入符旋转：CSS选择错误与State联动问题解决

完全可以仅通过CSS实现插入符旋转效果，不需要额外写全局状态管理；如果需要兼容老旧浏览器，也可以通过修正状态设计的React方案实现。

方案一：纯CSS实现（零JSX改动） #

之前直接给.collapsing类加旋转样式无效的原因是：.collapsing是绑定在折叠内容容器上的类，和插入符（由.card-header的伪元素生成）是平级兄弟节点，样式无法直接作用到伪元素上。
只需要补充带:has()选择器的匹配规则，就可以联动状态切换伪元素的旋转角度，完整CSS代码如下：

/* 保留原有伪元素插入符的基础样式，补充过渡属性实现平滑动画 */
.accordion > .card > .card-header:after {
    content: "";
    height: 10px;
    width: 10px;
    margin-right: 12px;
    border-bottom: 2px solid;
    border-right: 2px solid;
    transform: rotate(-45deg);
    float: right;
    margin-top: 6px; 
    /* 新增旋转过渡 */
    transition: transform 0.3s ease-out;
}

/* 匹配规则：当Card内部包含处于展开/折叠过渡状态的容器时，旋转同Card下的伪元素 */
.accordion > .card:has(> .collapsing) > .card-header:after,
.accordion > .card:has(> .collapse.show) > .card-header:after {
    transform: rotate(45deg);
}

这个方案完全兼容React Bootstrap的非受控Accordion用法，不需要修改任何原有JSX结构，主流现代浏览器均已支持:has()选择器，代码侵入性最低。

方案二：React受控状态实现（兼容老旧浏览器） #

之前出现所有插入符同步变化的问题，核心原因是用单个全局布尔值isActive作为所有插入符的状态判断依据，map循环渲染时所有项都读取同一个布尔值，没有做项级别的匹配判断。
正确的状态设计逻辑是：

• 不存布尔值，改为存储当前激活的手风琴项的eventKey
• 将Accordion改为受控组件，绑定自带的onSelect回调同步激活状态
• 渲染插入符类名时，逐一判断当前项的eventKey是否和全局激活值匹配
  完整可运行代码如下：

import { useState } from 'react';
import { Accordion, Card } from 'react-bootstrap';

const FaqAccordion = ({ faqs }) => {
  // 状态存储当前激活的手风琴项eventKey，初始值匹配原默认激活项
  const [activeKey, setActiveKey] = useState("0");

  return (
    <Accordion 
      activeKey={activeKey}
      onSelect={(selectedKey) => setActiveKey(selectedKey)}
    >
      {faqs.map((faq) => (
        <Card key={faq._id}>
          <Accordion.Toggle as={Card.Header} eventKey={faq._id}>
            <strong>
              {faq.question}
              {/* 单条匹配判断，仅当前激活项应用旋转类 */}
              <div
                className={activeKey === faq._id ? "arrow down" : "arrow right"}
              />
            </strong>
          </Accordion.Toggle>
          <Accordion.Collapse eventKey={faq._id}>
            <Card.Body>{faq.answer}</Card.Body>
          </Accordion.Collapse>
        </Card>
      ))}
    </Accordion>
  );
};

你之前编写的.arrow、.right、.down类样式完全可以保留，因为这个方案的插入符是独立DOM元素，和这些类的适配逻辑是匹配的。 #

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