Javascript 如何将React中的DOM元素列表作为目标

因此，我目前正在50天内完成Brad Traversys 50个项目，但我想使用React for practice在Next.js中构建它，因为这是我在工作中使用的

正如你从我在这里发布的帖子中看到的，事情进展得不太顺利！我已经遇到了路障

我试图创建一组卡片，当一张被点击时，它就会展开。除此之外，如果有一张卡已经展开，并且单击了另一张卡，我需要先前展开的卡折叠，而当前单击的卡则展开

我目前正在尝试关闭一个活动状态，并将其传递给面板道具，但很明显，这只是将所有flex设置为相同的状态，并且什么也没有发生。但是，当我试图在面板组件中定义活动的useState时，它是有效的，但是我不能将其他面板中的其他活动状态设置为false

你可以在这个代码沙盒上看到我的代码

您可以在这里看到正确的功能

---

最好的方法是什么？

在材质UI中，您需要一个类似于手风琴控件的逻辑。在我的评论中，这里是一个例子

---

每个面板都需要一个唯一的名称，单击“传递”返回到父组件，然后“打开-关闭”应基于该名称。您将拥有一个字符串，而不是一个布尔值。无论哪个面板与名称匹配，都将处于打开状态，其他面板将关闭。再次感谢西班牙语Joseph，我将active定义为active==“1（或2，3等）”，并单击setActive（1（或2，3等）），这允许呈现不同样式的组件。非常感谢！！