一次只允许扩展一个 React Accordion

Question

我有一组数据将用于创建手风琴，我想让它一次只能展开其中一个（即，如果用户展开手风琴 #1，然后展开 #2，#1 将取消展开）

我有这个代码：

const MyAccordion = props => {
    const [expanded, setExpanded] = React.useState()
    const handleChange = panel => (_, isExpanded) => {setExpanded(isExpanded ? panel : false)}
    const classes = styles //?
    let accordionInfo = createAccordionInfo(props.propthing);
    return (
        <Accordion
            key={accordionInfo.uid}
            onChange={handleChange(accordionInfo.uid)}
            expanded={expanded === accordionInfo.uid}
            TransitionProps={{unmountOnExit: true}}
            className={classes.accordion}
        >
            <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls={`${accordionInfo.uid}-content`} id={`${accordionInfo.uid}-header`}>
                <Typography>Accordion Summary</Typography>
            </AccordionSummary>

            <AccordionDetails>
                <Typography>Accordion Details</Typography>
            </AccordionDetails>
        </Accordion>
    )
}

const MyAccordions = props => {
    const [expanded, setExpanded] = React.useState()
    const handleChange = panel => (_, isExpanded) => {setExpanded(isExpanded ? panel : false)}
    return (
        <div className={styles.root}>
            {accordions.map(accordion => (
                <MyAccordion onChange={handleChange} propthing={accordion} />
            ))}
        </div>
    )
}

我对 React 还很陌生，所以我怀疑我在状态方面犯了一个错误。任何帮助/提示将不胜感激！谢谢

Answer 1

看起来您尝试将状态和处理程序放入父组件MyAccordions和子MyAccordion组件中。如果您只想一次打开一个手风琴，那么我建议将状态放置在父组件中，以便它可以管理打开/展开的内容。使用儿童手风琴 ID 作为确定应扩展哪个的基础。

家长

const MyAccordions = props => {
  const [expanded, setExpanded] = React.useState(null);

  const handleChange = id => (_, isExpanded) => {
    // if expanded, set id to open/expand, close it otherwise 
    setExpanded(isExpanded ? id: null);
  };

  return (
    <div className={styles.root}>
      {accordions.map(accordion => {
        const info = createAccordionInfo(accordion);
        return (
          <MyAccordion
            key={info.uid} // <-- set React key here!!
            onChange={handleChange(info.uid)}
            expanded={expanded === info.uid}
          />
        )
      })}
    </div>
  );
};

孩子

const MyAccordion =({ expanded, onChange }) => {
  const classes = styles //?

  return (
    <Accordion
      onChange={onChange}
      expanded={expanded}
      TransitionProps={{unmountOnExit: true}}
      className={classes.accordion}
    >
      <AccordionSummary
        expandIcon={<ExpandMoreIcon />}
        aria-controls={`${accordionInfo.uid}-content`}
        id={`${accordionInfo.uid}-header`}
      >
        <Typography>Accordion Summary</Typography>
      </AccordionSummary>

      <AccordionDetails>
        <Typography>Accordion Details</Typography>
      </AccordionDetails>
    </Accordion>
  );
};