Reactjs MUI:带有TransitionComponent的扩展面板不';不要把这个东西折叠起来
我将ExpansionPanel与TransitionComponent属性一起使用,当我设置默认值(折叠)时,扩展面板工作正常,但若值为另一个值(淡入、增长和其他),则折叠组件的高度与展开组件的高度相同Reactjs MUI:带有TransitionComponent的扩展面板不';不要把这个东西折叠起来,reactjs,material-ui,Reactjs,Material Ui,我将ExpansionPanel与TransitionComponent属性一起使用,当我设置默认值(折叠)时,扩展面板工作正常,但若值为另一个值(淡入、增长和其他),则折叠组件的高度与展开组件的高度相同 <ExpansionPanel expanded={expanded === '1'} onChange={handleChange('1')} TransitionComponent={Slide} TransitionProps={{ mountOnE
<ExpansionPanel
expanded={expanded === '1'}
onChange={handleChange('1')}
TransitionComponent={Slide}
TransitionProps={{ mountOnEnter: true }}
className={classnames('accordion-item', expanded === '1' && 'selected')}
>
UPD:有一个片段要使幻灯片转换正常运行,需要两个方面 为了适当调整高度,您需要在TransitionProps中指定
mountOnEnter
和UnmountNexit
要处理的另一个方面是超时
属性。Accordion(以前的ExpansionPanel),但只有折叠
才支持“auto”作为超时值,因此您需要为幻灯片
指定有效的超时。在我修改过的沙盒版本中,我使用225表示进入,195表示退出
下面是一个工作示例:
import React, { useState } from "react";
import {
Accordion,
AccordionSummary,
AccordionDetails,
Slide
} from "@material-ui/core/";
const slideProps = {
mountOnEnter: true,
unmountOnExit: true,
timeout: { enter: 225, exit: 195 }
};
export default function App() {
const [expanded, setExpanded] = useState(null);
return (
<>
<Accordion
TransitionComponent={Slide}
TransitionProps={slideProps}
expanded={expanded === "1"}
onChange={() => setExpanded("1")}
>
<AccordionSummary aria-controls="panel1d-content" id="panel1d-header">
First
</AccordionSummary>
<AccordionDetails>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada
lacus ex, sit amet blandit leo lobortis eget.
</AccordionDetails>
</Accordion>
<Accordion
TransitionComponent={Slide}
TransitionProps={slideProps}
expanded={expanded === "2"}
onChange={() => setExpanded("2")}
>
<AccordionSummary aria-controls="panel1d-content" id="panel1d-header">
Second
</AccordionSummary>
<AccordionDetails>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada
lacus ex, sit amet blandit leo lobortis eget.
</AccordionDetails>
</Accordion>
</>
);
}
import React,{useState}来自“React”;
进口{
手风琴,
手风琴小结,
手风琴细节,
滑动
}来自“@material ui/core/”;
常量slideProps={
蒙托内特:没错,
是的,
超时:{输入:225,退出:195}
};
导出默认函数App(){
const[expanded,setExpanded]=useState(null);
返回(