Динамический компонент списка в React

Введение

В этом практическом занятии мы изучим, как создать динамический компонент списка в React с использованием компонента DataList. С помощью этого компонента мы можем отображать массив примитивных значений в виде упорядоченного или неупорядоченного списка. В конце практического занятия вы будете лучше понимать, как использовать Array.prototype.map() и условно отображать элементы на основе пропсов в React.

Skills Graph

Data List

В ВМ уже предоставлены index.html и script.js. В общем, вам нужно только добавить код в script.js и style.css.

Эта функция отображает список элементов из массива примитивных значений. Она может быть использована для условного отображения упорядоченного или неупорядоченного списка в зависимости от значения пропса isOrdered. Чтобы отобразить каждый элемент из массива data, она использует Array.prototype.map(), чтобы создать элемент <li> с уникальным key для каждого элемента.

const DataList = ({ data, isOrdered = false }) => {
  const list = data.map((value, index) => (
    <li key={`${index}_${value}`}>{value}</li>
  ));

  return isOrdered ? <ol>{list}</ol> : <ul>{list}</ul>;
};

Вот пример того, как можно использовать этот компонент:

const names = ["John", "Paul", "Mary"];
ReactDOM.createRoot(document.getElementById("root")).render(
  <>
    <DataList data={names} />
    <DataList data={names} isOrdered={true} />
  </>
);

В этом примере мы передаем массив имен в компонент DataList и отображаем его дважды. В первый раз мы отображаем неупорядоченный список, а во второй раз — упорядоченный список.

Пожалуйста, нажмите кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Резюме

Поздравляем! Вы завершили практическое занятие по Data List. Вы можете выполнить больше практических занятий в LabEx, чтобы улучшить свои навыки.