IT评测·应用市场-qidao123.com技术社区

标题: React基础之渲染操作 [打印本页]

作者: 万有斥力 时间: 2025-3-8 03:04
标题: React基础之渲染操作
遍历渲染
function App() {
const list=[
{id:1,name:'小吴'},
{id:2,name:'小王'},
{id:3,name:'小李'},
]
const listContent= list.map(item=>{
return <li key={item.id}>{item.name}</li>
})
return (
<div>{listContent}</div>
);
}
export default App;

假如我们须要

import { Fragment } from "react";
function App() {
const list = [
{ id: 1, name: '小吴' },
{ id: 2, name: '小王' },
{ id: 3, name: '小李' },
];
const listContent = list.map(item => {
return (
<Fragment key={item.id}>
<li>{item.name}</li>
<li>---------</li>
</Fragment>
);
});
return (
<div>{listContent}</div>
);
}
export default App;

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/)