react.js 渲染一个列表的实例

import React,{Component} from ‘react‘;import ReactDOM from ‘react-dom‘;let users=[ ???{id:1,name:‘老王1‘,age:31}, ???{id:2,name:‘老王2‘,age:32}, ???{id:3,name:‘老王3‘,age:33}]class User extends Component{ ???render(){ ???????return( ???????????<tr> ???????????????<td>{this.props.item.id}</td> ???????????????<td>{this.props.item.name}</td> ???????????????<td>{this.props.item.age}</td> ???????????</tr> ???????) ???}}//在一个组件中，状态越少越好class UserList extends Component{ ???render(){ ???????return( ???????????<table> ???????????????<thead> ???????????????<tr> ???????????????????<th>ID</th> ???????????????????<th>名字</th> ???????????????????<th>年龄</th> ???????????????</tr> ???????????????</thead> ???????????????<tbody> ???????????????{ ???????????????????this.props.user.map((item,index)=>{ ???????????????????return ( ???????????????????????<User item={item} key={index}></User> ???????????????????) ???????????????}) ???????????????} ???????????????</tbody> ???????????</table> ???????) ???}}ReactDOM.render(<UserList user={users}></UserList>,document.querySelector("#root"));