[英]Force expanded state of Material-UI Accordion
We use Accordions to display editable entities and want to lock modified entities in the expanded state. Currently, we are forced to lift up expanded
state into accordion wrapper, practically duplicating built-in functionality, to prevent controlled<->uncontrolled Accordeon component transition (which is prohibited by MUI).我们使用 Accordions 来显示可编辑的实体,并希望在扩展的 state 中锁定修改的实体。目前,我们被迫将
expanded
的 state 提升到手风琴包装器中,实际上复制了内置功能,以防止受控<->不受控制的 Accordeon 组件转换(这是 MUI 禁止的)。 Something like this:像这样:
const AccordionWrapper = ({isModified = false, ...otherProps}) => {
const [expanded, setExpanded] = useState(isModified);
return (
<Accordion
expanded={expanded}
onChange={(_, expanded) => {
setExpanded(expanded || isModified);
}}
...otherProps
/> );
}
Is there a better way to achieve it?有没有更好的方法来实现它?
Alternatives we have considered:我们考虑过的替代方案:
<Accordion disabled={isModified}>
+ custom styles to make disabled accordion look not so disabled (grayish). <Accordion disabled={isModified}>
+ custom styles 使禁用的手风琴看起来不那么禁用(灰色)。 This is a little daunting that there is (an unlikely) chance to lock component in a collapsed state cause we don't control it.expanded
.expanded
的受控<->不受控转换。 In this case we could <Accorrdion expanded={isModified? true: undefined}>
<Accorrdion expanded={isModified? true: undefined}>
<Accorrdion expanded={isModified? true: undefined}>
. <Accorrdion expanded={isModified? true: undefined}>
。 Actually, there is no strong technical problem with such transition (especially when/if https://github.com/mui-org/material-ui/pull/29237 gets merged) PS.附言。 I hope MUI devs will see points 2 and 3 here on SO, cause these questions/suggestions probably are a non-issue and should not be in the MUI issue tracker.
我希望 MUI 开发人员能够在 SO 上看到第 2 点和第 3 点,因为这些问题/建议可能不是问题,不应出现在 MUI 问题跟踪器中。
If you want to add a custom expand toggle on MUI Accordion then you get the same with a property:-如果你想在 MUI 手风琴上添加自定义展开切换,那么你会得到相同的属性:-
defaultExpanded={Boolean}
So it will be like:-所以它会像:-
<Accordion defaultExpanded={true}>
{...otherProps}
</Accordon>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.