如何编写简单的React Material UI Collapse组件使用示例？

你只需要补充状态变量控制Collapse的核心in属性，就能实现点击按钮触发折叠展开的效果，完整可运行代码如下：

// 引入所需依赖
import { useState } from 'react';
import { Button, Collapse } from '@mui/material';
import LocalGroceryStoreOutlinedIcon from '@mui/icons-material/LocalGroceryStoreOutlined';

function CollapseDemo() {
  // 定义控制折叠状态的变量，默认是收起状态
  const [open, setOpen] = useState(false);

  return (
    <div>
      <Button 
        color="primary" 
        startIcon={<LocalGroceryStoreOutlinedIcon />}
        onClick={() => setOpen(!open)}
      > 
        Credit charge
      </Button>
      
      <Collapse in={open}>
        <div style={{ padding: '16px 8px' }}>
          test
        </div>
      </Collapse>
    </div>
  );
}

export default CollapseDemo;

关键注意点：

• Collapse的in属性是控制组件状态的核心参数，值为true时内容展开，值为false时内容收起
• 给按钮绑定点击事件切换状态变量的布尔值，就能实现点击触发折叠/展开的交互
• 可以给Collapse内部的内容容器加自定义样式，避免展开后内容和按钮间距太近

内容的提问来源于stack exchange，提问作者Samira