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'))

 

上一篇:javascript-在ReactJS中从另一个组件更新组件的状态


下一篇:React 部分