JSX的列表渲染

如果要渲染一组数据，应该使用数组的map()方法

注意：渲染列表时应该添加key属性，key属性的值要保证唯一

原则：map()遍历谁，就给谁添加key属性

注意：尽量避免使用索引号作为key

//1. 导入react
import React from 'react';
import ReactDOM from 'react-dom';

/*
  列表渲染：
*/

// 歌曲列表：
const songs = [
  {id: 1, name: "痴心绝对"},
  {id: 2, name: "像我这样的人"},
  {id: 3, name: "南山南"},
]

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

// 渲染react元素
ReactDOM.render(list, document.getElementById('root'))