javascript REACT：在无状态功能组件中渲染对象数组

Posted 2021-05-03

var users = [
  { id: 1, name: "Chris" },
  { id: 2, name: "Jeff" },
  { id: 3, name: "Julie" },
  { id: 4, name: "Jessica" }
];

function UserList(props) {
  var users = props.users;
  var usersListItems = users.map(function(user) {
    return <div key={user.id}>{user.name}</div>;
  });
  return <div>{usersListItems}</div>;
}

// or

// function UserList(props) {
//   var users = props.users;
//   return (
//     <div>
//       {users.map(function(user) {
//         return <div key={user.id}>{user.name}</div>;
//       })}
//     </div>
//   );
// }