react.js 渲染一个列表的实例-优快云博客

本文介绍了一个使用React实现的表格渲染示例，展示了如何通过数组映射来动态生成表格内容，并利用React组件化特性来提高代码复用性和维护性。

//引入模块
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}
]
//定义一个User子组件
class User extends Component{
    //接收父组件传递过来的item
    render(){
        return(
            <tr>
                <td>{this.props.item.id}</td>
                <td>{this.props.item.name}</td>
                <td>{this.props.item.age}</td>
            </tr>
        )
    }
}
//在一个组件中，状态越少越好
//定义一个UserList父组件
class UserList extends Component{
    //将父组件map映射出的每一个item都传递给User子组件 ,key不用管，就是一个死的语句，防止报错
    // 父组件下面user={users}，将数组传递给父组件
    //所有父组件要接收这个数组 this.props.属性名
    // 我们将item传递给子组件User
    //里面也需要接收this.props.item然后连缀就可以拿到item下面的数据了this.props.item.id
    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"));