javascript - 在包装器中反应密钥道具

Question

在查看我们的代码库时，我发现代码看起来有点像这样：

const Carousel = ({ items }) => {
  return (
    <CarouselOuter>
      {items.map((item) => (
        <CarouselItemWrapper>
          <CarouselItem key={item.key}>
            ...
          </CarouselItem>
        </CarouselItemWrapper>
      )}
    </CarouselOuter>
  );
}

请注意，key道具是 on CarouselItem，而不是CarouselItemWrapper直接从items.map. map这似乎工作正常，并且控制台中没有警告，但它与我在 React 中看到的每个示例背道而驰。

我想知道是否有一个很好的论据（特别是关于性能）来重新排列代码，key如下所示，或者这只是一种风格选择：

const Carousel = ({ items }) => {
  return (
    <CarouselOuter>
      {items.map((item) => (
        <CarouselItemWrapper key={item.key}>
          <CarouselItem>
            ...
          </CarouselItem>
        </CarouselItemWrapper>
      )}
    </CarouselOuter>
  );
}

旁注：CarouselOuter,CarouselItem和CarouselItemWrapper都是styled-components，但我怀疑这是否相关。