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

编程问答 2022-04-19

问题描述

我在我的第一个 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

解决方法

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

以下代码将 unmount AccordionDetails 组件是 Collapse 的子组件，当 Transition 达到退出状态或仅当 Accordion 折叠时。 

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

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

accordionmaterial-uireactjsreactjsreactjsreactjs