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

之后显示效果即为：