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