如何通过编程方式控制CoreUI Accordion组件的展开项？

嘿，我刚梳理了你的问题，其实你的核心思路是对的——用外部state来控制activeItemKey就行，只是可能几个细节没处理到位导致没生效，我来帮你拆解下：

首先，你有没有给每个Accordion子项（不管是自定义的还是CoreUI原生的）设置对应的itemKey？activeItemKey是靠匹配这个值来定位展开项的，如果子项没配置itemKey，组件根本不知道该对应到哪一项。

比如你的自定义组件AccordionItem1和AccordionItem2，得确保它们内部的CAccordionItem带上正确的itemKey，或者直接把itemKey作为props传递进去：

// 自定义AccordionItem1示例
const AccordionItem1 = ({ data, itemKey }) => {
  return (
    <CAccordionItem itemKey={itemKey}>
      <CAccordionHeader>第一项标题</CAccordionHeader>
      <CAccordionBody>{data}</CAccordionBody>
    </CAccordionItem>
  );
};

然后在使用时，给每个子项指定和state值匹配的itemKey：

import { useState } from 'react';
import { CAccordion } from '@coreui/react';

const MyAccordion = ({ data, data2 }) => {
  const [activeAccordion, setActiveAccordion] = useState('2');

  const toggleToFirstItem = () => {
    setActiveAccordion('1');
  };

  const toggleToSecondItem = () => {
    setActiveAccordion('2');
  };

  return (
    <div>
      {/* 测试按钮，触发state更新 */}
      <button onClick={toggleToFirstItem}>展开第一项</button>
      <button onClick={toggleToSecondItem}>展开第二项</button>
      
      <CAccordion activeItemKey={activeAccordion}>
        <AccordionItem1 data={data} itemKey="1" />
        <AccordionItem2 data={data2} itemKey="2" />
      </CAccordion>
    </div>
  );
};

另外，你可以先检查state是否真的更新了——比如在组件里加个console.log(activeAccordion)，看看点击按钮后值有没有变化。如果state更新了但Accordion没反应，大概率是itemKey和activeItemKey类型不匹配（比如一个是数字、一个是字符串），或者自定义组件没把itemKey传递给内部的CAccordionItem。

至于你提到的AccordionContext没导出的问题，其实完全不用纠结——CoreUI的CAccordion本身就支持受控模式，直接用外部state控制activeItemKey就足够实现需求，不需要依赖内部未导出的Context。

最后可以确认下你的@coreui/react版本，建议使用最新稳定版，旧版本可能在受控模式的实现上存在小问题。

内容来源于stack exchange