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
相关产品推荐
相关产品推荐

