React（4） --引入图片及循环数据

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

引入图片的方法

1.引入本地图片

方法1：

import logo from '../assets/images/1.jpg';

方法2：

2.引入远程图片

循环数据的方法

constructor(props){
super(props);
this.state={
msg:'新闻',
list:['','',''], 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>
)