react-列表渲染

• 学习资源推荐：https://blog.csdn.net/qq_42813491/article/details/90213353

普通数组

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;

• 效果图

标签数组

• 遍历

数组对象

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;