Material-UI 扩展面板不服从控制扩展答案

【问题标题】：Material-UI Expansion Panel not obeying controled expansionMaterial-UI 扩展面板不服从控制扩展
【发布时间】：2019-10-14 12:18:58
【问题描述】：

我希望打开三个expansion panels 中的第一个，但仍然一次只允许打开一个面板。目前，我可以打开第一个面板，也可以控制面板一次打开一个，但不能同时打开。但这是我需要的。

我还需要循环渲染 jsx。这个循环似乎是导致问题的原因，因为它没有循环就可以工作。

第 2 和第 3 个抽屉在这里正常工作。

我已经尝试像在文档中那样直接传递道具，但这不起作用。目前我正在尝试动态传递它们，因此只有正确的道具与每个面板一起使用，循环的每次迭代。它看起来像这样：

function setAttributes(i) {
   return [
     { defaultExpanded: true },
     { expanded: expanded === `panel2` },
     { expanded: expanded === `panel3` }
   ]
  }

return (
<div className={`${classes.root} accordion`}>
  {Object.values(props.drawers).map((drawer, i) => {
    return (
      <ExpansionPanel
        key={i} 
        //set attributes here
        {...setAttributes(i)[i]}
        onChange={handleChange(`panel${i + 1}`)}
        className="expansion-panel"
      >
        <ExpansionPanelSummary
          className="expansion-panel-inner"
          expandIcon={<ExpandMoreIcon />}
          aria-controls={`panel${i + 1}bh-content`}
          id={`panel${i + 1}bh-header`}
        >
          <Typography className={`${classes.heading} panel-heading`}>
            {' '}
            {drawer.heading}
          </Typography>
          <Typography className={classes.secondaryHeading} />
        </ExpansionPanelSummary>
        <ExpansionPanelDetails>
          <Typography>{drawer.text}</Typography>
        </ExpansionPanelDetails>
      </ExpansionPanel>
    )
  })}
</div>

)

我试过查看渲染后附加了哪些道具，但不是很清楚；这并不像寻找额外的课程那么容易。我不清楚每个面板是否添加了适当的道具。我还尝试在 setAttributes { defaultExpanded: true, expanded: expanded === "panel1" }, 中创建第一个对象，但这只会禁用默认扩展。

demo 显示了问题。

我希望第一个面板在加载时打开，然后只有一个面板（无论单击哪个面板）打开，并且只有那个面板。

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

如果我理解您的问题，您应该可以设置默认值。

const [expanded, setExpanded] = React.useState("panel1");

如果您想通过再次单击使其无法折叠面板：

const handleChange = panel => (event, isExpanded) => {
    setExpanded(panel);
};

【讨论】：

就是这样！我根本没有从文档中得到这个，所以谢谢你。