如何在 React 中定位 DOM 元素列表答案

【问题标题】：How to target a list of DOM elements within React如何在 React 中定位 DOM 元素列表
【发布时间】：2021-05-01 23:55:34
【问题描述】：

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

正如您在我发帖时看到的那样，进展并不顺利！我已经遇到了障碍。

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

我目前正在尝试关闭一个活动状态，并将其传递给 Panel 道具，但显然这只是将所有 flex 设置为相同并且没有任何反应。但是，当我尝试在 Panel 组件中定义活动的 useState 时，它可以工作，但我无法将其他面板中的其他活动状态作为目标，将它们设置为 false。

最好的方法是什么？

【问题讨论】：

您需要为每个面板设置一个唯一的名称，然后单击将其传递回父组件，并且打开-关闭应基于该名称。您将拥有一个字符串，而不是一个布尔值。与名称匹配的面板将处于打开状态，其他面板将关闭。

【解决方案1】：

您需要在 Material UI 中使用类似 Accordion 控件的逻辑。正如我的评论，这里是例子。

【讨论】：

再次感谢西班牙约瑟夫，我将 active 定义为 active==="1 (or 2, 3 etc.)" 和 onClick setActive(1 (or 2, 3 etc)) 允许渲染不同样式的组件。非常感谢！