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;