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

如何解决手风琴-从映射数组中打开第一个选项卡-React TS

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

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

<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>

解决方法

就我而言，我知道标签的标题是什么，因此我能够执行一个简单的if语句，如果标签名称是这样的话，它将打开第一个标签。

const firstTabCheck =
    title === 'Invest some of it' ? (
        <Accordion className={classes.accordion} defaultExpanded={true}>
            <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>
    ) : (
        <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>
    )
return firstTabCheck

如果有人要答复，我敢肯定有一种更干净的方法可以这样做，但这暂时解决了我的问题。

,

{forms.map((form,index) => {
                return (
                    <Accordion expanded={expanded === `panel_${index}`} onChange={handleChange(`panel_${index}`)}>
                        <AccordionSummary
                            expandIcon={<ExpandMoreIcon />}
                            aria-controls="panel1bh-content"
                            id="panel1bh-header"
                        >
                            {form.status === "pending" && (
                                <Chip
                                    style={{ margin: '0' }}
                                    size="small"
                                    label={form.status}
                                    color="default"
                                    clickable
                                    icon={<HistoryIcon />}
                                />
                            )}
                            {form.status === "approved" && (
                                <Chip
                                    style={{ margin: '0' }}
                                    size="small"
                                    label={form.status}
                                    color="primary"
                                    clickable
                                    icon={<DoneIcon />}
                                />
                            )}
                            {form.status === "rejected" && (
                                <Chip
                                    style={{ margin: '0' }}
                                    size="small"
                                    label={form.status}
                                    color="secondary"
                                    clickable
                                    icon={<ClearIcon />}
                                />
                            )}
                            <Typography className={classes.heading}>{form.typeOfleave}</Typography>
                            <Typography className={classes.secondaryHeading}>{moment(form.createdAt).format('MMMM Do YYYY,h:mm:ss a')}</Typography>
                        </AccordionSummary>
                        <AccordionDetails style={{ display: 'flex',flexDirection: 'column' }}>
                            <div>
                                <Typography gutterBottom className={classes.secondaryHeading}>
                                    Reason : {form.reason}
                                </Typography>
                            </div>
                            <div style={{ display: 'flex' }}>
                                <Typography className={classes.secondaryHeading}>
                                    From : {moment(form.from).subtract(10,'days').calendar()}
                                </Typography>
                                <Typography className={classes.secondaryHeading} style={{ marginLeft: '20px' }}>`enter code here`
                                    To : {moment(form.to).subtract(10,'days').calendar()}
                                </Typography>
                            </div>
                        </AccordionDetails>
                    </Accordion>
                )
            })}

将扩展状态（默认状态）设置为“0”，因为数组索引从 0 开始

const [expanded,setExpanded] = React.useState('panel_0');

const handleChange = (panel) => (event,isExpanded) => {
        setExpanded(isExpanded ? panel : false);
    };