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

2018-06-24 00:17:16来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

//引入模块
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"));

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:使用闭包的注意点

下一篇:js的原型