- 在编写音乐列表组件的过程里,我们需要将音乐列表里面的数据进行遍历。这时并不是用简单的数组遍历那么简单。我们应该使用map,目的是为了保护原有数据,对map进行操作不会改变原始数据。
import React from 'react'
import MusicListItem from '../components/musicListitem'
let MusicList = React.createClass({
render() {
let listEle = null;
listEle = this.props.musicList.map((item) => {
return (
<MusicListItem key={item.id} > {item.title} </MusicListItem>
);
});
return (
<ul> {listEle}</ul>
);
export default MusicList;
- ES6在标签属性里面嵌入字符的写法
<li className={'components-musicListitem row${this.props.focus ? 'focus':''}'}></li>