React学习之旅----循环数据

import React from 'react';
// 引入本地图片，需以组件的形式引入，而远程图片则不需要
import logo from '../assets/images/logo.svg';
// 组件名称，类首字母必须大写
class News extends React.Component {
constructor(props) {
super(props) // 用于父子组件传值
this.state = {
width: '100px',
list: ['111', '222'],
// 这种便签形式的数组可以直接渲染出来，所以上面的list数组只需要转换成list2形式的即可
list2: [<h2 key='1'>list1</h2>, <h2 key='2'>list2</h2>],
// 对象性数组
list3: [{ title: '新闻111' }, { title: '新闻222' }, { title: '新闻333' }]
}
}
render () {
var listResult = this.state.list.map(function (value, key) {
return <li key={key}>{value}</li>
})
return (
<div>
<ul>
<li>
新闻组件
<img src={logo} width={this.state.width} alt='' />
<img src='https://avatar.csdn.net/9/8/5/1_qfxlw.jpg?1539742992' alt='' />
</li>
</ul>
<hr />
{this.state.list2}
<hr />
{listResult}
<hr />
{this.state.list3.map(function (value, key) {
return (<li key={key}>{value.title}</li>)
})}
</div>
)
}
}
export default News

之后显示效果即为：