无法一次展开一个 Material-ui 手风琴

Question

我正在开发一个项目，我需要显示手风琴，一次只能展开一个。 即使我的代码与Material-ui官方网站代码相同，它仍然无法工作。

我的数据结构：

const investmentScreenData: [
  {
    id: 0,
    title: "....",
    icon: "....",
    points: [
      '...',
      '...',
      '...',
    ]
  },
{...},
{...}
]

Investment.jsx（父组件）：

{investMentScreenData.map((item, index) => {
 return <InfoAccordion key={index} item={item} />;
})}

InfoAccordion.jsx：

  const [expanded, setExpanded] = useState(0);

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


return (
   <StyledAccordion
       expanded={expanded === item.id}
       onChange={handleChange(item.id)}
    >
    <StyledAccordionSummery
            aria-controls='panel1d-content'
            id='panel1d-header'
          >
     <Typography
                component='p'
                variant='p'
                fontSize={{ xs: '19px', sm: '24px', md: '19px', lg: '24px' }}
                fontWeight={500}
                fontFamily={'inter'}
                color={'text.darkGreen'}
              >
                {item.title}
              </Typography>
</StyledAccordionSummery>

<StyledAccordionDetails>
 {item.points.map((point, index) => {
                  return (
                    <StyledListitem key={index} disableGutters disablePadding>
                       ...
                    </StyledListitem>
        )
  </StyledAccordionDetails>
        </StyledAccordion>

当用户单击手风琴时，之前打开的手风琴应关闭并打开当前单击的手风琴。

Answer 1

这是我几个月前创建的手风琴的示例

我创建了一个自己的 Accordion 组件，它采用 defaultExpanded 作为参数。

interface AccordionComponentProps {
    readonly summary: string;
    readonly summaryIcon?: React.ReactElement;
    readonly content?: React.ReactElement;
    readonly defaultExpanded?: boolean;
    readonly disabled?: boolean;
}

export function AccordionComponent({summary, summaryIcon, content, defaultExpanded = false, disabled = false}: AccordionComponentProps): React.ReactElement {
    let [expanded, setExpanded] = React.useState(defaultExpanded);
    let handleAccordionChange = (): void => setExpanded(!expanded);

    return (
        <Accordion className="accordion" onChange={disabled === false ? handleAccordionChange : () => false} defaultExpanded={defaultExpanded}>
            <AccordionSummary className="summary-wrapper">
                <Box className={`summary ${disabled ? 'disabled' : ''}`}>
                    <Box className="summary-icon">
                        {summaryIcon}
                    </Box>
                    {summary}
                </Box>
                <ArrowDropDownIcon className={`expand-icon ${expanded ? 'expanded' : ''} ${disabled ? 'disabled' : ''}`} />
            </AccordionSummary>
            <AccordionDetails className="content">
                <Box>
                    {content}
                </Box>
            </AccordionDetails>
        </Accordion>
    );
}

为了在单击下一个时关闭最后一个，我创建了一个切换功能，该功能可以切换默认展开的状态，从而关闭旧的并仅打开下一个。

let [loginInformationExpanded, setLoginInformationExpanded] = React.useState<boolean>(true);
let [propertyInformationExpanded, setPropertyInformationExpanded] = React.useState<boolean>(false);


    function toggleLoginInformationExpanded(): void {
        if (!propertyInformationExpanded && loginInformationExpanded) {
            setPropertyInformationExpanded(true);
        }
        setLoginInformationExpanded(!loginInformationExpanded);
    }

    function togglePropertyInformationExpanded(): void {
        if (propertyInformationExpanded) {
            if (type === 'other' && !powerOfAttorneyInformationExpanded) {
                setPowerOfAttorneyInformationExpanded(true);
            }
            else if (type !== 'other' && !insuranceInformationExpanded) {
                setInsuranceInformationExpanded(true);
            }
        }
        setPropertyInformationExpanded(!propertyInformationExpanded);
    }



<AccordionSellingForm prefixSummary={t('process.pages.accordion_service_recipient')}
                                      summary={t('service_recipient.fill_out_prompt')}
                                      content={<LoginInformation salesProjectNumber={salesProject.number}/>}
                                      expanded={loginInformationExpanded} onClick={toggleLoginInformationExpanded}/>


<AccordionSellingForm prefixSummary={t('property.title')} summary={t('property.subtitle')}
                                  content={<PropertyInformation salesProjectNumber={salesProject.number}/>}
                                  expanded={propertyInformationExpanded} onClick={togglePropertyInformationExpanded}/>