数据列表

从一个原始数据数组中渲染一个元素列表。

• 使用 isOrdered 属性的值来有条件地渲染 <ol> 或 <ul> 列表。
• 使用 Array.prototype.map() 来将 data 中的每个项渲染为一个带有适当 key 的 <li> 元素。

const DataList = ({ isOrdered = false, data }) => {
  const list = data.map((val, i) => <li key={`${i}_${val}`}>{val}</li>);
  return isOrdered ? <ol>{list}</ol> : <ul>{list}</ul>;
};

const names = ['约翰', '保罗', '玛丽'];
ReactDOM.createRoot(document.getElementById('root')).render(
  <>
    <DataList data={names} />
    <DataList data={names} isOrdered />
  </>
);