javascript - 如何在 React 中定位 DOM 元素列表

Question

所以我目前正在 50 天内完成 Brad Traversys 的 50 个项目，但我想在 Next.js 中使用 React 进行练习，因为这是我在工作中使用的。

正如您从我在这里发帖中看到的那样，进展并不顺利!我已经遇到了障碍。

我正在尝试创建一组卡片，当单击其中一张时，它会展开。除此之外，如果有一张卡片已经展开，并且单击了另一张卡片，我需要折叠之前展开的卡片，同时展开当前单击的卡片。

我目前正在尝试关闭事件状态，并将其传递给 Panel Prop ，但显然这只是将所有 flex 设置为相同，没有任何反应。但是，当我尝试在 Panel 组件内定义事件 useState 时，它​​起作用了，但我无法将其他 Panel 中的其他事件状态作为目标，将它们设置为 false。

你可以在这个CodeSandbox上看到我的代码https://codesandbox.io/s/nifty-goldberg-5noi4?file=/pages/expanding-cards.jsx

您可以在此处查看正确的功能 https://50projects50days.com/projects/expanding-cards/

解决这个问题的最佳方法是什么？

Answer 1

您需要像 Material UI 中的 Accordion 控件一样的逻辑。在我的评论中，这里是示例。

https://material-ui.com/components/accordion/#controlled-accordion