You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Material-UI Accordion修改后强制保持展开状态的最优实现方案

MUI Accordion 已修改实体锁定展开实现方案咨询

我们使用 Accordions 组件展示可编辑实体,需求是将已修改的实体锁定为展开状态。
目前为了避免 MUI 禁止的 Accordion 组件受控/非受控状态切换问题,我们只能把 expanded 状态提升到 accordion 封装层,这实际上是重复了组件的内置功能,当前实现代码如下:

const AccordionWrapper = ({isModified = false, ...otherProps}) => {
  const [expanded, setExpanded] = useState(isModified);

  return (
    <Accordion
      expanded={expanded}
      onChange={(_, expanded) => {
        setExpanded(expanded || isModified);
      }}
      {...otherProps}
    />
  );
}

请问是否有更优的实现方式?
我们已经考虑过以下备选方案:

  • 方案一:使用 <Accordion disabled={isModified}> 配合自定义样式修改禁用态的灰化效果,但该方案存在小概率将组件锁定在收起状态的风险,因为我们没有主动控制其展开状态。
  • 方案二:提交PR允许 expanded 属性在受控/非受控状态间切换,这样我们就可以直接写 <Accordion expanded={isModified ? true : undefined}>,这种切换逻辑本身没有明显的技术障碍,对应PR合并后该方案的可行性会更高。
  • 方案三:如果MUI团队认为该需求有价值,可以为Accordion新增类似 forceExpand 的专属属性实现该功能。

注:这类需求/建议暂时不算功能故障,不适合提交到MUI的issue tracker,希望MUI开发人员能看到上述第2、3点建议。

内容的提问来源于stack exchange,提问作者Alex Shumsky

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.28 03:15:08