React --引入图片及循环数据

Posted 2021-01-25 juewuzhe

引入图片的方法

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