javascript REACT:渲染类组件中的对象数组

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript REACT:渲染类组件中的对象数组相关的知识,希望对你有一定的参考价值。

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

class UserList extends React.Component {
  render() {
    var users = this.props.users;
    var usersListItems = users.map(function(user) {
      return <div key={user.id}>{user.name}</div>;
    });
    return <div>{usersListItems}</div>;
  }
}

// or

// class UserList extends React.Component {
//   render() {
//     var users = this.props.users;
//     return (
//       <div>
//         {users.map(function(user) {
//           return <div key={user.id}>{user.name}</div>;
//         })}
//       </div>
//     );
//   }
// }

以上是关于javascript REACT:渲染类组件中的对象数组的主要内容,如果未能解决你的问题,请参考以下文章

前端React 条件渲染

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

React官方文档学习记录- 条件渲染

在 React 类组件内部渲染常量

ReactJS / Javascript - 无法渲染对象中项目的组件

一个 React 组件可以按 2 个类渲染吗?