时间戳

首页 > 解决方案 > 在 material-ui Accordian 崩溃时从 DOM 中移除 AccordianDetails 组件

reactjs - 在 material-ui Accordian 崩溃时从 DOM 中移除 AccordianDetails 组件

问题描述

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

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

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

当前安装版本：

  • 反应：16.12.0
  • 材料-ui：4.9.1

标签： reactjsmaterial-uiaccordion

解决方案

用于折叠效果的组件或TransitionComponent是Collapse组件，默认情况下，子组件在达到“退出”状态后保持挂载。我们可以通过使用传递道具给它TransitionProps。

以下代码将unmount组件AccordionDetails作为Collapse何时Transition达到退出状态或只是Accordion折叠时的子组件。

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

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

推荐阅读