强制展开 state 的 Material-UI 手风琴

Question

我们使用 Accordions 来显示可编辑的实体，并希望在扩展的 state 中锁定修改的实体。目前，我们被迫将expanded的 state 提升到手风琴包装器中，实际上复制了内置功能，以防止受控<->不受控制的 Accordeon 组件转换（这是 MUI 禁止的）。 像这样：

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

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

有没有更好的方法来实现它？

我们考虑过的替代方案：

1. <Accordion disabled={isModified}> + custom styles 使禁用的手风琴看起来不那么禁用（灰色）。 这有点让人望而生畏，因为我们无法控制它，所以（不太可能）有机会将组件锁定在折叠的 state 中。
2. 发送 PR 以允许expanded的受控<->不受控转换。 在这种情况下，我们可以<Accorrdion expanded={isModified? true: undefined}> <Accorrdion expanded={isModified? true: undefined}> 。 实际上，这种转换没有很强的技术问题（特别是当/if https://github.com/mui-org/material-ui/pull/29237被合并时）
3. 如果 MUI 团队发现它有用，可能会添加一个新的手风琴道具，如“forceExpand”

附言。 我希望 MUI 开发人员能够在 SO 上看到第 2 点和第 3 点，因为这些问题/建议可能不是问题，不应出现在 MUI 问题跟踪器中。

Answer 1

如果你想在 MUI 手风琴上添加自定义展开切换，那么你会得到相同的属性：-

defaultExpanded={Boolean}

所以它会像：-

<Accordion defaultExpanded={true}>
{...otherProps}
</Accordon>