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, чтобы просмотреть веб-страницу.