1. 程式人生 > >React(4) --引入圖片及迴圈資料

React(4) --引入圖片及迴圈資料

引入圖片的方法

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>
        )