码迷,mamicode.com
首页 > 其他好文 > 详细

React(4) --引入图片及循环数据

时间:2018-12-09 16:47:18      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:key   this   --   color   bsp   new   http   com   cfa   

引入图片的方法

1.引入本地图片

方法1:

import logo from ../assets/images/1.jpg;
<img src={logo} />

方法2:

<img src={require(../assets/images/1.jpg)} />

2.引入远程图片

<img src="https://www.baidu.com/img/xinshouye_353af22a7f305e1fb6cfa259394dea9b.png" />

循环数据的方法

constructor(props){
        super(props);
        this.state={
            msg:新闻,
            list:[11111111111,222222222222,3333333333333],            
            
            list2:[<h2 key=‘1‘>我是一个h2</h2>,<h2 key=‘2‘>我是一个h2</h2>],


            list3:[

                {title:"新闻11111111"},
                {title:"新闻22222"},
                {title:"新闻33333333"},
                {title:"新闻444444444"}
            ]
        }
    }

方法1:

render(){

        let listResult=this.state.list.map(function(value,key){

                return <li key={key}>{value}</li>   //循环数据要加key
        })



        return(
            <div className="news">
                <ul>
                     {listResult}
                </ul>
            </div>
        )
    }

方法2:

return(
            <div className="news">

                {this.state.list2}

            </div>
        )

方法3:

return(
            <div className="news">

                <ul>

                     {

                        this.state.list3.map(function(value,key){

                            return (<li key={key}>{value.title}</li>);

                        })
                    }
                </ul>

            </div>
        )

 

React(4) --引入图片及循环数据

标签:key   this   --   color   bsp   new   http   com   cfa   

原文地址:https://www.cnblogs.com/juewuzhe/p/10090758.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!