如何将动态内容添加到React Material UI扩展面板，同时仅保留一个活动选项卡的功能

Question

我有WebGL / React项目，可通过单击获得模拟数据中的用户列表。

我希望此内容出现在手风琴中，并且因为我在使用材质的ui方面拥有丰富的经验，所以我认为我将使用它们的扩展面板。

它在演示页面上可以很好地运行，但是，如果我想映射我的用户数据库并用它来填充扩展面板，它似乎摆脱了方便的功能。

我希望默认情况下打开第一个扩展面板，然后在单击一个面板时，其他所有面板都关闭，这是示例中的默认行为。

当我传递道具时

      <ExpansionPanel
        square
        expanded={expanded === "panel1"}
        onChange={handleChange("panel1")}
      >
        <ExpansionPanelSummary
          aria-controls="panel1d-content"
          id="panel1d-header"
        >
          {props.country}
        </ExpansionPanelSummary>
        <ExpansionPanelDetails>{props.children}</ExpansionPanelDetails>
      </ExpansionPanel>
    </div>

然后在这里使用它。...

              {users &&
                users.map(user => (
                  <Accordion title={user.name} key={user.name}>
                    <div className="overlay-container">
                      <div className="overlay overlay-anim">
                        <div className="overlay-content-container">
                          <div className="name-container">
                            <h1 key={user.id} className="user_name">
                              {user.name}
                            </h1>
                          </div>
                        </div>
                      </div>
                    </div>
                  </Accordion>
                ))}

默认情况下，它将打开所有面板，而在一个面板处于活动状态时不会关闭其他面板。 （同样不是真实的数据，并且gif使得它有点小问题，但由于代码库太大，我无法生成示例）。

有人会对实现这一目标有一些想法或例子吗？

编辑

按照下面的建议，在映射函数中添加了一个id并改编了扩展组件，不幸的是得到相同的效果/问题

  const [expanded, setExpanded] = React.useState("panel" + props.id);

  const handleChange = panel => (event, newExpanded) => {
    setExpanded(newExpanded ? panel : false);
  };

  return (
    <div>
      <ExpansionPanel
        expanded={expanded === "panel" + props.i}
        onChange={handleChange("panel" + props.i)}
      >
        <ExpansionPanelSummary
          aria-controls={"panel" + props.id + "d" + "-content"}
          id={"panel" + props.id + "d" + "-header"}
        >
          {props.country}
        </ExpansionPanelSummary>
        <ExpansionPanelDetails>{props.children}</ExpansionPanelDetails>
      </ExpansionPanel>
    </div>
  );
}```

Answer 1

很难说您正在使用ExpansionPanel，但是看起来您有相同的意思

<ExpansionPanel expanded={expanded === 'panel1'} onChange={handleChange('panel1')}>

对于每个人，您都需要为其拥有唯一的名称（panel1，panel2，panel3）。

编辑：

您可以将迭代器添加到map函数中：

users.map((user, i) => (

并且我是否已将它作为道具传递给ExpansionPanel>

<ExpansionPanel expanded={expanded === 'panel' + props.i} onChange={handleChange('panel' + props.i)}>