Правильное использование фрагментов React с массивом элементов в React 16 - PullRequest
Новая
       9

Правильное использование фрагментов React с массивом элементов в React 16

0 голосов
/ 07 июня 2018

headTags - это массив элементов React без определенных ключей.Я могу сделать без предупреждений, используя следующий JSX. 

return (
  <head>
    {React.Children.toArray(headTags)}
  </head>
);

Есть ли какой-нибудь возможный способ сделать это с фрагментами в React 16?Я получаю предупреждение, что key требуется для каждого дочернего элемента при использовании этого: 

return (
  <head>
    <React.Fragment>
      {headTags}
    </React.Fragment>
  </head>
);

Ответы [ 2 ]

0 голосов
/ 03 августа 2018

Согласно этому ответу в выпуске github вы можете.

Рендеринг массива элементов без ключей , делая их как дочерние элементы внутриReact.Fragment или любой элемент, использующий React.createElement

Проблема: itemsArray - массив, следовательно, ожидается ключ 

render() {
  return <React.Fragment>{...itemsArray}</React.Fragment>
}

Решение: itemsArray взрывается непосредственно как дочерний элемент, поэтому ключ не требуется 

render() {
  return React.createElement(React.Fragment, {}, ...itemsArray)
}

Это соответствует следующему 

render() {
  return <React.Fragment>
    <YourItem />
    <YourItem />
    <YourItem />
  </React.Fragment>
}
0 голосов
/ 07 июня 2018

React.Fragment - это альтернатива рендерингу массивов, и вам не нужен ключ, если вы рендерили несколько элементов с помощью React.Fragment

return (
  <head>
    <React.Fragment>
      <div>Here</div>
      <div>And HEre</div>
    </React.Fragment>
  </head>
);

Однако в любое время вам нужно рендерить массив элементов, которые вынужно указать ключ.Вы можете избежать предупреждения, указав ключ для каждого элемента в массиве (уникальный ключ улучшит оптимизацию) или используя React.Children.toArray(), который добавляет ключ, если его нет, но не является оптимальным

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...