如何在NextJS中默认展开手风琴组的第一个项？

你的手风琴组通过isOpen状态跟踪当前展开项的索引，初始值设为null时没有任何项展开，只需修改状态的初始值，就能让第一个项默认展开：

修改步骤 #

1. 在Accordion Group的状态初始化中，把null替换为第一个项的索引0：

// 原代码
const [isOpen, setIsOpen] = useState(null)

// 修改后
const [isOpen, setIsOpen] = useState(0)

2. （可选优化）如果你的faqData可能为空数组，建议加个判断避免错误：

const [isOpen, setIsOpen] = useState(faqData.length > 0 ? 0 : null)

修改后的完整Accordion Group代码 #

const [isOpen, setIsOpen] = useState(0)

const toggleOpen = id => () => setIsOpen(
  isOpen => isOpen === id ? null : id,
);

{
  faqData.map(({question, answer}, index) => (
    <AccordionItem
      key={index} // 建议添加唯一key，生产环境最好用数据自带的唯一ID替代index
      question={question} 
      answer={answer}
      isOpen={isOpen === index}
      toggle={toggleOpen(index)}
    />
  ))
}

原理很直接：当isOpen初始值为0时，第一个项的isOpen={isOpen === index}会判定为true，触发展开样式和动画，实现默认展开第一个项的效果。

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