Reactjs MUI:带有TransitionComponent的扩展面板不';不要把这个东西折叠起来

Reactjs MUI:带有TransitionComponent的扩展面板不';不要把这个东西折叠起来,reactjs,material-ui,Reactjs,Material Ui,我将ExpansionPanel与TransitionComponent属性一起使用,当我设置默认值(折叠)时,扩展面板工作正常,但若值为另一个值(淡入、增长和其他),则折叠组件的高度与展开组件的高度相同 <ExpansionPanel expanded={expanded === '1'} onChange={handleChange('1')} TransitionComponent={Slide} TransitionProps={{ mountOnE

我将ExpansionPanel与TransitionComponent属性一起使用,当我设置默认值(折叠)时,扩展面板工作正常,但若值为另一个值(淡入、增长和其他),则折叠组件的高度与展开组件的高度相同

<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);
返回(