Реагировать на ключевую опору в оболочке

Просматривая нашу базу кода, я обнаружил код, который выглядит примерно так:

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

Обратите внимание, что опора key находится на 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 - это все , но я сомневаюсь, что это актуально.

Ключевой атрибут должен быть на прямом дочернем элементе, я тестировал себя и получаю предупреждение, если я помещаю ключ на дочерний элемент второго уровня. Нашел эту тему, которая могла бы ответить на ваш вопрос: stackoverflow.com/questions/50303465/…

Zerowiel 30.03.2021 00:54

Вы можете проверить, какой ключ установлен для каждого дочернего элемента, проверив инструмент реагирования разработчика :) Я нашел это в базе кода реагирования, может вас заинтересовать github.com/facebook/react/blob/…

Zerowiel 30.03.2021 01:00

@Zerowiel Вообще-то ты прав. Есть предупреждение, просто мы его раньше пропустили. Спасибо вам за ссылки.

p.s.w.g 30.03.2021 01:16

Мне был любопытен ваш вопрос, поэтому я сам его протестировал и нашел в github, на который я ссылался, какой-то крайний случай. Если вы используете children.map, не будет предупреждений, если вы не используете ключ: p

Zerowiel 30.03.2021 01:18
1
4
35
0

Другие вопросы по теме