ReactJS | Списки

Опубликовано: 7 Августа, 2021

Списки очень полезны при разработке пользовательского интерфейса любого веб-сайта. Списки в основном используются для отображения меню на веб-сайте, например меню навигационной панели. В обычном JavaScript мы можем использовать массивы для создания списков. Мы можем создавать списки в React так же, как и в обычном JavaScript. Мы подробно рассмотрим, как это сделать, далее в этой статье.
Давайте сначала посмотрим, как мы можем просматривать и обновлять любой список в обычном JavaScript. Мы можем использовать функцию map () в JavaScript для просмотра списков.

Ниже код JavaScript иллюстрирует использование функции map () для просмотра списков:

Javascript




<script type= "text/javascript" >
var numbers = [1,2,3,4,5];
const updatedNums = numbers.map((number)=>{
return (number + 2);
});
console.log(updatedNums);
</script>

Приведенный выше код будет выводить на консоль следующий вывод:

 [3, 4, 5, 6, 7]

Давайте теперь создадим список элементов в React. Мы будем отображать номера списков в приведенном выше коде как неупорядоченный элемент списка в браузере, а не просто войти в консоль. Для этого мы пройдемся по списку с помощью функции JavaScript map () и обновим элементы, которые будут заключены между элементами <li> </li>. Наконец, мы заключим этот новый список в элементы <ul> </ul> и отрендерим его в DOM.

Приведенный ниже код иллюстрирует это:

Javascript




import React from 'react' ;
import ReactDOM from 'react-dom' ;
const numbers = [1,2,3,4,5];
const updatedNums = numbers.map((number)=>{
return <li>{number}</li>;
});
ReactDOM.render(
<ul>
{updatedNums}
</ul>,
document.getElementById( 'root' )
);

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

Списки рендеринга внутри компонентов

В приведенном выше коде в React мы напрямую отрисовали список в DOM. Но обычно это не очень хорошая практика для отображения списков в React. Мы уже говорили об использовании компонентов и видели, что все в React построено как отдельные компоненты. Рассмотрим пример меню навигации. Очевидно, что на любом веб-сайте пункты меню навигации жестко не запрограммированы. Этот элемент извлекается из базы данных и затем отображается в виде списков в браузере. Итак, с точки зрения компонента, мы можем сказать, что мы передадим список компоненту с помощью свойств, а затем будем использовать этот компонент для рендеринга списка в DOM. Мы можем обновить приведенный выше код, в котором мы непосредственно отрендерили список, до компонента, который будет принимать массив в качестве свойств и возвращать неупорядоченный список.

Javascript






import React from 'react' ;
import ReactDOM from 'react-dom' ;
// Component that will return an
// unordered list
function Navmenu(props)
{
const list = props.menuitems;
const updatedList = list.map((listItems)=>{
return <li>{listItems}</li>;
});
return (
<ul>{updatedList}</ul>
);
}
const menuItems = [1,2,3,4,5];
ReactDOM.render(
<Navmenu menuitems = {menuItems} />,
document.getElementById( 'root' )
);

Выход:

Вы можете видеть в приведенном выше выводе, что неупорядоченный список успешно отображается в браузере, но в консоль регистрируется предупреждающее сообщение.

 Предупреждение: каждый дочерний элемент в массиве или итераторе
         должен иметь уникальную "ключевую" опору

В приведенном выше предупреждающем сообщении говорится, что каждый из элементов списка в нашем неупорядоченном списке должен иметь уникальный ключ. «Ключ» - это специальный строковый атрибут, который необходимо включить при создании списков элементов в React. Подробнее о ключах мы поговорим в следующих статьях. А пока давайте просто назначим строковый ключ каждому из наших элементов списка в приведенном выше коде.

Ниже представлен обновленный код с ключами:

Javascript




import React from 'react' ;
import ReactDOM from 'react-dom' ;
// Component that will return an
// unordered list
function Navmenu(props)
{
const list = props.menuitems;
const updatedList = list.map((listItems)=>{
return (
<li key={listItems.toString()}>
{listItems}
</li>
);
});
return (
<ul>{updatedList}</ul>
);
}
const menuItems = [1,2,3,4,5];
ReactDOM.render(
<Navmenu menuitems = {menuItems} />,
document.getElementById( 'root' )
);

Этот код даст тот же результат, что и предыдущий, но на этот раз без предупреждения. Ключи используются в React, чтобы определить, какие элементы в списке изменены, обновлены или удалены. Другими словами, мы можем сказать, что ключи используются для идентификации элементов в списках. Подробнее о ключах мы узнаем в нашей следующей статье.