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

Posted 2020-10-07 学

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"));