Правильное использование фрагментов React с массивом элементов в React 16
headTags - это массив элементов React без каких-либо определенных ключей. Я могу выполнить рендеринг без предупреждений, используя следующий JSX.
return (
<head>
{React.Children.toArray(headTags)}
</head>
);
Есть ли способ сделать это с помощью фрагментов в React 16? Я получаю предупреждение о том, что для каждого дочернего элемента требуется key при использовании этого:
return (
<head>
<React.Fragment>
{headTags}
</React.Fragment>
</head>
);
Ответы 2
React.Fragment - альтернатива рендерингу массивов, и вам не нужен ключ, если у вас рендеринг нескольких элементов с помощью React.Fragment.
return (
<head>
<React.Fragment>
<div>Here</div>
<div>And HEre</div>
</React.Fragment>
</head>
);
Однако в любое время, когда вам нужно отобразить массив элементов, вам нужно указать ключ. Вы можете избежать предупреждения, если укажете ключ для каждого элемента в массиве (уникальный ключ улучшит оптимизацию) или с помощью React.Children.toArray(), который добавляет ключ, если он отсутствует, но не является оптимальным.
В соответствии с этот ответ в выпуске 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>
}