当我在 React for 面板中使用映射时，如何只打开一个面板

Question

我创建了一个面板来映射我的用户，并在他们的名字下面显示他们的歌曲。 我遇到的问题是，当我单击{用户名}时，它会打开所有手风琴面板。我希望它只打开手风琴以单击面板.

<PanelGroup accordion id="accordion-example">
{this.state.allUsersList.map((user, index) => (
<Panel>
<Panel.Heading>
<Panel.Title toggle >
<Button key={index} className="btn-uvideo">{user.Username}</Button>
</Panel.Title>
</Panel.Heading>
<Panel.Body collapsible>
<ListGroup>
{user.songs.map((song, index) => (
<ListGroupItem key={index}>
<Button className="btn-video" onClick={() => this.handleSongChange(song)}>
<p>{song.SongName}</p>
</Button>
</ListGroupItem>
))}
</ListGroup>
</Panel.Body>
</Panel>
))}
</PanelGroup>

Answer 1

我假设你使用的是React-Bootstrap。看起来你错过了eventKey：

事件键是组件的唯一标识符，使其与集合中的其他组件区分开来。与 React 的关键道具类似，因为它只需要在组件兄弟姐妹中是唯一的，而不是全局的。

https://react-bootstrap.github.io/components/panel/#panels-accordion

<PanelGroup accordion id="accordion-example">
<Panel eventKey="1">
...
</Panel>
<Panel eventKey="2">
...
</Panel>
<Panel eventKey="3">
...
</Panel>
</PanelGroup>

假设您的用户名是唯一的，您可以将该值用于您的eventKey：

<PanelGroup accordion id="accordion-example">
{this.state.allUsersList.map((user, index) => (
<Panel eventKey={user.Username}>
...