Question

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

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

第二个和第三个抽屉在这里可以正常工作。

我已经尝试过像在文档中那样直接传递道具，但这没有用。当前，我正在尝试动态传递它们，以便每个面板，循环的每次迭代都只有合适的道具。看起来像这样：

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显示了问题。

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

Answer 1

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

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

如果要创建它，则无法再次单击以折叠面板：

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

Material-UI扩展面板未遵循受控扩展

1 个答案: