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

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和Accordion API文档中找不到任何选项。

当前安装的版本：

• 反应：16.12.0
• 材料ui：4.9.1

Answer 1

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

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

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

参考：http://reactcommunity.org/react-transition-group/transition#Transition-道具卸载OnExit