前端框架react

目录

react列表渲染

列表渲染方式：
第一种：for循环
第二种方式：调用函数map（function(){}）

实例：
var data=[
   {
    title:'eihf1111',
    conten:'vfbvaljl',
    imgUrl: 'https://p3.pstatp.com/list/pgc-image/1535673456768a5bbd27f32'
   },
   {
    title:'eihf212',
    conten:'vfbvaljl',
    imgUrl: 'https://p3.pstatp.com/list/pgc-image/1535673456768a5bbd27f32'
   },
   {
    title:'eihf333',
    conten:'vfbvaljl',
    imgUrl: 'https://p3.pstatp.com/list/pgc-image/1535673456768a5bbd27f32'
   }

]

var newItem=(
    <div>
        
这是标题
        
这是内容
        ""/>
    div>
)

**//1， 列表循环方式（for循环）**
var List=[]
for(var i=0;idiv key={i}>
    
{data[i].title}
    
{data[i].content}
    
    div>
)
List.push(newItem)
}

//2。 列表循环方式（map（）函数循环）
var List2=[]
List2=data.map(function(item,i){
    return(

          <div key={i}>
                
{item.title}
                
{item.content}
                
                div>

    )
})
class ListCom extends Component{
    constructor(){
        super()
        //3. 列表循环，在state里调用数据方式，主要还是调用方法函数map（）,
        //该函数主要是对调用对象的item进行循环展现
        this.state={
            msg:'国际新闻',
         students:[
             <div>从上岛咖啡div>,
             <div>发div>,
             <div>打开了div>,
             'xiaohe','xiaoming','xiaoxigua'
         ],
         news:[
            {
                title: '习近平访美1',
                content: '这是新闻内容',
                imgUrl: 'https://p3.pstatp.com/list/pgc-image/1535673456768a5bbd27f32'
            },
            {
                title: '习近平访美2',
                content: '这是新闻内容',
                imgUrl: 'https://p3.pstatp.com/list/pgc-image/1535673456768a5bbd27f32'
            },
            {
                title: '习近平访美3',
                content: '这是新闻内容',
                imgUrl: 'https://p3.pstatp.com/list/pgc-image/1535673456768a5bbd27f32'
            }    
         ]
        }
    }
    render(){
        return(
            // 对于匿名函数的this指向解决方案
              //   第一种解决方式:var that = this
                //  第二种解决方式：箭头函数
                //  第三种解决方式：bind(this)
        <div>
             
新闻列表1学生
             {this.state.students}
            
新闻列表2
            {List2}
            
新闻列表3
            {
                this.state.news.map(function(item,i){
                return(
                    <div key={i}>
                        
{item.title}
{this.state.msg}
                        
{item.content}
                        
                    div>
                )
                }.bind(this))
            }
        div>
        )
    }
}
export default ListCom;