时间戳

首页 > 解决方案 > 在基于道具呈现不同组件的 HOC 中为 React Elements 设置不同的键？

javascript - 在基于道具呈现不同组件的 HOC 中为 React Elements 设置不同的键？

问题描述

我知道为什么 React Elements 需要键并且它们必须是唯一的。大多数情况下，我们可以通过从数据中提供一些唯一键作为 React 键来解决这个问题。

目前的问题陈述是我有一个 HOC 组件，一个在其中呈现多张卡片的 Carousel。它需要渲染哪个组件卡片由 cardType 属性驱动，因为它可以包含 customerCards、reviewCards 和各种其他类型的卡片。每张卡片的数据可能有不同的键作为唯一标识符。

在这种情况下，我尝试使用 index 属性来生成唯一键，但在进一步检查时发现了各种导致意外行为的示例。所以我尝试了不同的解决方案。

我的解决方案：我编写了一个映射器，它将类型映射到键名，而渲染键是根据类型 prop 分配的。

例如：-carouselConfig = { customer: 'name', reviewCard: 'reviewNo', queryCard: 'queryId' }

在 carouselComponent 中，我们可以将键分配为，key = cardData[carouselConfig[cardType]]cardType 属性定义要渲染的卡片，它将驱动为渲染组件设置键的位置。

这是正确的方法吗？或者有没有可以在这种情况下应用的替代方法？

标签： javascriptreactjs

解决方案

几乎...如果字段中的值是唯一的，但可能在不同字段之间重复，例如queryId=1在reviewNo=12 张不同的卡上，您可以确保这样的唯一键：

key = `${cardType}-$cardData[carouselConfig[cardType]]}`

...假设进行了广泛的测试以确保配置中没有错字，这些字段实际上存在于真实数据中并且值是唯一的。

推荐阅读