基于映射项状态的条件 class 渲染

Question

https://codesandbox.io/s/vjonpw8xzl （无响应，请在新 window/fullpage 中查看以正确查看）

期望的结果：单击每张卡片上的向下（展开）图标时，它们彼此独立运行，opening/closing 通过切换 className: 'show' 展开菜单 className: expanded 和className: 'hide'

发生了什么：应用程序中的状态正在更新，当单击展开图标时，所有展开的菜单都会同时打开。

我明白为什么会这样，只是不知道如何解决。

如果是我自己的数据，我会把它添加到状态中的每个对象

isExpanded:false

并切换它，但由于大量数据来自 API，我不知道如何执行此操作。感谢您的帮助。

Answer 1

无需在 App 组件中处理 isExpanded 的状态逻辑，您可以将其移至 Character 组件并删除所有 isExpanded / toggleExpanded道具

Answer 2

您需要确定哪些状态实际上定义了组件并且是组件所需要的。由于 isExpanded 和 toggleExpanded 是特定于 character 组件的东西，它们应该位于该组件中。