reactjs 强制材质-UI折叠面板的展开状态

6qfn3psc  于 2023-01-12  发布在  React
关注(0)|答案(1)|浏览(151)

我们使用Accordion来显示可编辑的实体,并希望将修改的实体锁定在展开状态。目前,我们被迫将expanded状态提升到Accordion Package 器中,实际上复制了内置功能,以防止受控的、不<->受控的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}>+自定义样式,使禁用的 accordion 看起来不是那么禁用(灰色)。这是一个有点令人生畏的,有(不太可能)的机会锁定组件在折叠状态,因为我们不控制它。
    1.发送PR,允许<->expanded的受控非受控转换。在这种情况下,我们可以<Accorrdion expanded={isModified ? true : undefined}>。实际上,这种转换没有强烈的技术问题(特别是当/如果https://github.com/mui-org/material-ui/pull/29237合并时)
    1.如果MUI团队发现有用,可以添加一个新的 accordion prop ,如“forceExpand
    我希望MUI开发人员能看到SO上的第2点和第3点,因为这些问题/建议可能不是问题,不应该出现在MUI问题跟踪器中。
mwkjh3gx

mwkjh3gx1#

如果你想在MUI Accordion上添加一个自定义的展开开关,那么你可以使用一个属性:-

defaultExpanded={Boolean}

所以它会像:

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

相关问题