在材质-ui Accordian 崩溃时从 DOM 中删除 AccordianDetails 组件

Question

我在我的第一个 React 项目中使用

Accordion

的

material-ui

组件。我注意到，当

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 和 Accordion API 文档中找不到执行此操作的任何选项。

当前安装的版本：

• 反应：16.12.0
• 材质用户界面：4.9.1

Answer 1

用于折叠效果或

TransitionComponent

的组件是

Collapse

组件，默认情况下，子组件在达到“退出”状态后保持安装状态。我们可以使用 TransitionProps

将 props 传递给它

。

当

unmount

达到退出状态或仅仅当

AccordionDetails

折叠时，以下代码将使

Collapse

组件成为

Transition

的子组件。Accordion

参考：

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

Answer 2

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

现已在较新版本的 MUI 中弃用。

目前推荐的方法是使用

TransitionProps

代替。 这是更新的解决方案：

slotProps