数据列表

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

  • 使用 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 />
  </>
);