React流水账02

数据渲染

---

在JSX中的{ }中放入数组的时候会自动渲染

let arr = [
    { username: 'Circle', age: 21},
    { username: 'Tim', age: 22 },
]

列表渲染

    let usersElements  = []
    for (let user of arr)
      {
        usersElements.push(
          <div>
            <div>姓名：{user.username}</div>
            <div>年龄：{user.age}</div>
            <hr/>
          </div>
        )
      }
      return (
        <div>{usersElements}</div>
      )

Map遍历

    return (
      <div>
        {arr.map((user)=>{
          return (
            <div>
              <div>姓名：{user.username}</div>
              <div>性别：{user.age}</div>
              <hr />
            </div>
          )
        })}
      </div>
    )

Map遍历组件

/* 单个文件 */
class User  extends Component {
  render(){
    let {user} = this.props     
    return (
      <div>
        <div>姓名：{user.username}</div>
        <div>年龄:{user.age}</div>
        <hr />
      </div>
    )}
}
class Index extends Component{
  render()
  {
    return (
      <div>
        {arr.map((user) => <User user={user} />)}
      </div>
   )}
}