ReactJS | Списки
Списки очень полезны при разработке пользовательского интерфейса любого веб-сайта. Списки в основном используются для отображения меню на веб-сайте, например меню навигационной панели. В обычном 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, чтобы определить, какие элементы в списке изменены, обновлены или удалены. Другими словами, мы можем сказать, что ключи используются для идентификации элементов в списках. Подробнее о ключах мы узнаем в нашей следующей статье.