数据列表
从一个原始数据数组中渲染一个元素列表。
- 使用
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 />
</>
);