Accordion - 从映射数组中打开第一个选项卡 - React TS

Question

{accordion.map(accordionItem => (
                <AccordionItem
                    key={accordionItem.title}
                    text={accordionItem.text}
                    title={accordionItem.title}
                ></AccordionItem>
            ))}

我有一个映射数据数组的 Accordion 组件。我正在尝试仅打开第一个选项卡。您可以添加一些属性以默认展开全部或不展开，但想知道如何在第一个选项卡上执行此操作？Material UI 也有自定义的 Accordions，但当所有数据都在一个文件中并且不通过数组映射时，它们会成为焦点。

<Accordion className={classes.accordion} defaultExpanded={false}>
        <AccordionSummary
            expandIcon={<ExpandMoreIcon />}
            aria-controls='panel1a-content'
            id='panel1a-header'
            style={{
                borderBottom: '2px solid #EBEDF7'
            }}
        >
            <Typography className={classes.heading}>{title}</Typography>
        </AccordionSummary>
        <AccordionDetails>
            <Text label={text} className={classes.body} html>
                {text}
            </Text>
        </AccordionDetails>
    </Accordion>

Answer 1

这似乎适合我使用 MUI v5 打开手风琴的第一项（摘要）

...

          summaries.map((summary, index) => (
            <MuiAccordion
              defaultExpanded={index === 0 ? true : false}                  
              key={summary.id}
            >

...