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企服之家，中国第一个企服评测及商务社交产业平台。