使用 Redux 翻转卡状态 - 它应该是有状态组件



我有一个JSON文件,其中包含一个具有许多属性的对象,我想将它们显示在卡片网格上(我已经完成了(。

现在我希望能够单击卡片并在单击的卡片上显示其他内容(但仍保留在网格视图中(,>基本上就像转动卡片以显示更多信息一样。

我会通过向我的 JSON 对象添加一个额外的 isFlipped 布尔属性来做到这一点,以便我可以通过 Redux 操作更改它,还是应该创建一个有状态卡组件?什么是最佳实践?

为您的卡创建一个表示组件,该组件接收 isFlipped 属性和翻转卡函数。 此组件可以根据给定的属性确定要呈现的内容。 如果 isFlipped 为 true,则呈现其他信息。 否则,呈现标准数据。 在某些事件(如 onClick(上,调用 flipCard 函数。

然后,通过将其连接到状态、从商店的某些部分映射 isFlippeded 以及调度 flipCard 操作来生成容器组件。 如果可以翻转多张卡片,则需要将翻转的卡片映射到某种集合中,例如对象映射。 如果地图中存在卡片的密钥,则该卡片将被视为翻转。

无论在需要渲染可翻转卡片的何处,都可以渲染容器。

最新更新