React 动态列表组件 | 编程教程

简介

在本实验中，我们将探索如何使用 DataList 组件在 React 中创建一个动态列表组件。借助此组件，我们可以将原始值数组呈现为有序列表或无序列表。在实验结束时，你将更好地理解如何在 React 中使用 Array.prototype.map() 以及如何根据属性有条件地渲染元素。

这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个初级级别的实验，完成率为 95%。获得了学习者 100% 的好评率。

数据列表

虚拟机中已提供 index.html 和 script.js。一般来说，你只需在 script.js 和 style.css 中添加代码。

此函数从原始值数组渲染项目列表。它可用于根据 isOrdered 属性的值有条件地渲染有序列表或无序列表。为了从 data 数组渲染每个项目，它使用 Array.prototype.map() 为每个项目创建一个带有唯一 key 的 <li> 元素。

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 组件并渲染两次。第一次，我们渲染一个无序列表，而第二次我们渲染一个有序列表。

请点击右下角的“上线”以在端口 8080 上运行网络服务。然后，你可以刷新“Web 8080”标签页以预览网页。

总结

恭喜你！你已完成数据列表实验。你可以在 LabEx 中练习更多实验以提升你的技能。