在折叠 material-ui 手风琴时从 DOM 中删除 AccordionDetails 组件

Question

我在我的第一个 React 项目中使用 material-ui 的 Accordion 组件。我注意到当 Accordion 折叠时，AccordionDetails（Collapse 的后代）不会从 DOM 中删除。它只能通过在内部改变高度来隐藏。我的代码是：

<Accordion>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel1a-content"
          id="panel1a-header"
        >
          <Typography className={classes.heading}>Accordion 1</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
            sit amet blandit leo lobortis eget.
          </Typography>
        </AccordionDetails>
      </Accordion>

在 React Developer Tools 中它看起来像这样：

Accordion
  Accordion.ContextProvider
    AccordionSummary
      ButtonBase
  Collapse
    Transition
      Context.Provider
        AccordionDetails
....

如何折叠 Accordion 从 DOM 中删除 AccordionDetails 并使用默认转换？

我在 Collapse and Accordion API 文档中找不到执行此操作的任何选项。

Currently installed version:

react: 16.12.0

material-ui: 4.9.1

Answer 1

用于折叠效果或TransitionComponent的组件是Collapse组件，默认情况下子组件在达到'exited'状态后保持挂载状态。我们可以 pass props to it 通过使用 TransitionProps.

以下代码将 unmount AccordionDetails 组件作为 Collapse 的子组件，当 Transition 达到退出状态时或仅当 Accordion 处于崩溃了。

<Accordion TransitionProps={{ unmountOnExit: true }}>

参考： http://reactcommunity.org/react-transition-group/transition#Transition-prop-unmountOnExit

在折叠 material-ui 手风琴时从 DOM 中删除 AccordionDetails 组件

Removal of AccordianDetails component from DOM on collapse of material-ui Accordian

accordion

reactjs

material-ui