JSX的列表渲染

• 在使用JSX时,如果想要渲染一组数据,应该使用数组的map()方法
• 注意: 渲染列表时应该添加key属性,key 属性的值要保证唯一
• 原则: map() 遍历谁,就给谁添加 key 属性
• 注意: 尽量避免使用索引号作为key

// 导入 react
import React from 'react'
import ReactDOM from 'react-dom'

// 使用 JSX 创建 React 元素

const songs = [
  {id: 1, name: '稻香'},
  {id: 2, name: '听妈妈的话'},
  {id: 3, name: '烟花易冷'}
]

const title = (
    <ul>
      {songs.map(item => <li key={item.id}>{ item.name }</li>)}
    </ul>
)

// 渲染 React 元素
ReactDOM.render(title, document.getElementById('root'))