如何解决在 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
....
如何折叠 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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。