react-列表渲染


普通数组

import React, {Component}from 'react'

class App extends Component{

  constructor(props){
    super(props);
    this.state={
      list:['java','node','php','python']
    }
  }
  render(){

    let itemLi=this.state.list.map((item,i)=>{
        return <li key={i}>{item}</li>
    })
    return (
        <div> 
            <ul>{itemLi}</ul>
        </div>

      )
  }

}

export default App;
  • 效果图

react-列表渲染_.net

标签数组

react-列表渲染_react-列表渲染_02

  • 遍历

react-列表渲染_react-列表渲染_03

数组对象

import React, {Component}from 'react'

class App extends Component{

  constructor(props){
    super(props);
    this.state={
      studentArr:[
        {id:1,name:"tom"},
        {id:2,name:"jurry"}
      ]
    }
  }
  render(){

let stuLi=this.state.studentArr.map((stu,i)=>{
  return <li key={i}>{stu.id}--{stu.name}</li>
})


    return (
        <div> 
            <ul>{stuLi}</ul>
        </div>

      )
  }

}

export default App;

react-列表渲染_数组_04