我知道为什么 React Elements 需要键并且它们必须是唯一的。大多数时候，我们可以通过提供一些来自数据的唯一键作为 React 键来解决这个问题。
目前的问题是我有一个 HOC 组件，一个在其中呈现多张卡片的 Carousel。它需要渲染哪个组件卡片由 cardType Prop 驱动，因为它可以包含 customerCards、reviewCards 和各种其他类型的卡片。每张卡片的数据可能有不同的键作为唯一标识符。
在这种情况下，我尝试使用 index 属性来生成唯一键，但在进一步检查时遇到了各种导致意外行为的示例。所以我尝试了不同的解决方案。
我的解决方案:我编写了一个映射器，将类型映射到键名称，并根据类型属性分配渲染键。
例如:- carouselConfig = { customer: 'name', reviewCard: 'reviewNo', queryCard: 'queryId' }
在 carouselComponent 中，我们可以将键分配为 key = cardData[carouselConfig[cardType]] 其中 cardType 属性定义要呈现的卡片，它将驱动键所在的位置为呈现的组件设置。
这是正确的做法吗？或者是否有任何替代方法可以应用于这种情况？
最佳答案
几乎...如果字段中的值是唯一的，但可能在不同字段之间重复，例如queryId=1 和 reviewNo=1 在 2 张不同的卡片上，您可以像这样确保唯一的 key :
key = `${cardType}-$cardData[carouselConfig[cardType]]}`
...假设进行大量测试以确保配置中没有拼写错误，字段实际存在于真实数据中并且值是唯一的。
关于javascript - 在基于 Prop 呈现不同组件的 HOC 中为 React Elements 设置不同的键？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58501936/