Итак, проблема в том, что мы не можем передать несколько элементов HTML/JSX или компонентов React в оператор возврата компонента.
return ( <p> I am First Element </p> <p> I am First Element </p> );
Это может привести к ошибке!
Итак, чтобы решить эту проблему, у нас есть один подход по умолчанию, т. е. обернуть эти два элемента ‹p› в один элемент ‹div›.
return ( <div> <p> I am First Element </p> <p> I am First Element </p> </div> );
Это точно решит вашу проблему!
Но это своего рода ограничение, или может быть какой-то сценарий, когда вы хотите вернуть несколько элементов, не заключая их в родительский элемент ‹div› для стиля или по каким-либо другим причинам!
Так что делать?
Вот второй подход к решению этой ошибки.
return [ <p> I am First Element </p>, <p> I am First Element </p> ];
Здесь вместо того, чтобы возвращать элементы в круглых скобках (), мы будем возвращать их в квадратных скобках []. Теперь эти элементы возвращаются в виде списка/массива иони должны быть разделены запятой (,)как мы это делаем в обычных списках/массивах!
Ура! Проблема решена🎉🎊
Но подождите, вы получаете предупреждение в консоли?
React нужен уникальный ключ для каждого элемента списка/массива. Это не обязательно, но чтобы избежать этого предупреждения, вам нужно добавить уникальный ключ к каждому элементу в списке/массиве.
Ключи могут быть любыми, например комбинацией алфавитов и цифр или динамически сгенерированных случайных ключей или чем угодно.
return [ <p key="xyz1"> I am First Element </p>, <p key="xyz2"> I am First Element </p> ];
Примечание. Ключи должны быть уникальными для каждого элемента.
Теперь у нас есть еще один подход к решению этой ошибки. Проверь это.
В React есть компонент под названием Fragment. Мы можем обернуть другие элементы в этот компонент фрагмента, а не в элемент DOM ‹div›, потому что этот фрагмент не отображается на экране, в отличие от ‹div›.
return ( <React.Fragment> <p> I am First Element </p> <p> I am First Element </p> </React.Fragment> );
Если вы не хотите использовать его с точкой (.), вы можете импортировать его из React и использовать.
import React , {Fragment} from "react"; return ( <Fragment> <p> I am First Element </p> <p> I am First Element </p> </Fragment> );
Это был мой первый блог, и если он вам помог, пожалуйста, хлопните в ладоши.
Спасибо.