javascript - 一次只允许展开一个 React Accordion

Question

我有一组将用于创建 Accordion 的数据，我想这样做以便一次只能展开其中一个(即，如果用户展开 Accordion #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 组件中。如果您一次只想打开一个 Accordion ，那么我建议将状态放在父组件中，以便它可以管理打开/展开的内容。使用子 Accordion id 作为确定应该扩展的基础。

parent

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>
  );
};

child

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>
  );
};