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;