如何设置shadcn ui Accordion组件默认展开指定项

嘿，我来帮你搞定这个问题！shadcn/ui的Accordion组件其实是基于Radix UI的Accordion封装的，所以得按Radix的规则来配置默认展开项~

你提到的defaultValue其实是正确的方向，但大概率是没配合对应Item的value属性一起使用才没生效，具体操作步骤如下：

• 给外层的<Accordion>组件添加defaultValue属性，值设为你想要默认展开的那个面板的唯一标识（比如第一个面板设为"item-1"）
• 给每个<AccordionItem>组件设置对应的value属性，确保你想默认展开的Item的value和defaultValue完全匹配

给你一个完整的代码示例参考：

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";

export default function DefaultOpenAccordion() {
  return (
    <Accordion defaultValue="item-1">
      {/* 第一个面板的value和defaultValue一致，默认展开 */}
      <AccordionItem value="item-1">
        <AccordionTrigger>第一个面板（默认展开）</AccordionTrigger>
        <AccordionContent>
          这是第一个面板的内容，页面加载完成后就会自动展示出来啦
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>第二个面板</AccordionTrigger>
        <AccordionContent>
          这是第二个面板的内容，默认处于折叠状态
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger>第三个面板</AccordionTrigger>
        <AccordionContent>
          这是第三个面板的内容，同样默认折叠
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

如果之后你需要手动控制面板的展开/折叠状态（比如通过按钮触发），可以改用受控模式：用value代替defaultValue，同时配合onValueChange事件来更新状态值。但如果只是需要默认展开第一项，上面的非受控模式就完全够用啦。

备注：内容来源于stack exchange，提问作者Souvik Das