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
 

之後顯示效果即為：