在反应中的特定项目上启动手风琴菜单

Question

我正在为 React 使用 ChakraUI。手风琴文档非常有帮助，但我不确定如何让手风琴在特定选择时自动打开。我已经通读了文档，但我不太明白如何做到这一点。以下是文档：https://chakra-ui.com/docs/disclosure/accordion

到目前为止我已经使用了这个例子：

import {
  Accordion,
  AccordionItem,
  AccordionButton,
  AccordionPanel,
  AccordionIcon,
} from '@chakra-ui/react'

...
<Accordion>
  <AccordionItem>
    <h2>
      <AccordionButton>
        <Box flex='1' textAlign='left'>
          Section 1 title
        </Box>
        <AccordionIcon />
      </AccordionButton>
    </h2>
    <AccordionPanel pb={4}>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.
    </AccordionPanel>
  </AccordionItem>

  <AccordionItem>
    <h2>
      <AccordionButton>
        <Box flex='1' textAlign='left'>
          Section 2 title
        </Box>
        <AccordionIcon />
      </AccordionButton>
    </h2>
    <AccordionPanel pb={4}>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.
    </AccordionPanel>
  </AccordionItem>
</Accordion>

根据文档，我尝试了很多属性都无济于事。我尝试添加 defaultIndex 作为 <Accordion /> 的道具，但我不确定如何设置实际索引。例如 <Accordion defaultIndex=0 /> 是不允许的。我不确定如何使用它。

谢谢

Answer 1

来自docs

If you pass this prop, ensure that the index or defaultIndex prop is an array.

像下面这样尝试

<Accordion defaultIndex={[0]}>
  ...
  ...
</Accordion>

在反应中的特定项目上启动手风琴菜单

start an accordion menu on a specific item in react

reactjs

jsx

accordion

chakra-ui