React第一阶段-- 列表数据

使用map渲染列表数据

//users数据
const users = [
  { username: 'Jerry', age: 21, gender: 'male' },
  { username: 'Tomy', age: 22, gender: 'male' },
  { username: 'Lily', age: 19, gender: 'female' },
  { username: 'Lucy', age: 20, gender: 'female' }
]

class Index extends Component {
  render () {
  <div>
  {users.map((user)=>{
       return (
          <div>
              <div>姓名：{user.username}</div>
              <div>年龄：{user.age}</div>
              <div>性别：{user.gender}</div>
              <hr />
         </div>
       )
  })}
  </div>
   }
}

优化代码：

//组件化，优化代码
class User extends React.Component {
  render() {
    const { user } = this.props
    return (
      <div>
        <div>姓名：{user.username}</div>
        <div>年龄：{user.age}</div>
        <div>性别：{user.gender}</div>
        <hr />
      </div>

    )
  }
}
class Index extends React.Component {

  render() {
    return (
      <div>
       //会报错： {users.map((user) =><User user={user}  />)}
       //掩耳盗铃，标准写法，后台数据返回的 id作为列表元素的key
       {users.map((user，i) =><User user={user} key={i} />)}
      </div>
    )
  }
}

重点！Key

<div>a</div>
<div>b</div>
<div>c</div>

假设上面有这么三个列表元素，现在改变一下位置：

<div>a</div>
<div>c</div>
<div>b</div>

c和b的位置互换了，但是React并不知道我们只是改变了一下元素的位置，他会重新渲染后面两个元素，但如果给元素加上一个唯一标识，React就知道这两个元素只是交换了一下位置。

<div key='a'>a</div>
<div key='b'>b</div>
<div key='c'>c</div>

对于用表达式套数组罗列到页面上的元素，都要为每个元素加上 key 属性，这个 key 必须是每个元素唯一的标识。

• 一般来说，key 的值可以直接后台数据返回的 id，因为后台的 id 都是唯一的。

练习

现在需要在页面上显示一本书的章节，章节内容存放到一个数组里面：

const lessons = [
  { title: 'Lesson 1: title', description: 'Lesson 1: description' },
  { title: 'Lesson 2: title', description: 'Lesson 2: description' },
  { title: 'Lesson 3: title', description: 'Lesson 3: description' },
  { title: 'Lesson 4: title', description: 'Lesson 4: description' }
  ...
]

现在需要你构建两个组件。一个组件为 Lesson 组件，渲染特定章节的内容。可以接受一个名为 lesson 的 props，并且把章节以下面的格式显示出来：

<h1>Lesson 1: title</h1>
<p>Lesson 1: description</p>

点击每个章节的时候，需要把章节在列表中的下标和它的标题打印（console.log）出来，例如第一个章节打印： 0 - Lesson 1: title，第二个章节打印：1 - Lesson 2: title。

另外一个组件为 LessonsList，接受一个名为 lessons 的 props，它会使用 Lesson 组件把章节列表渲染出来。

 class Lesson extends Component{
  handleClick(){
    console.log(this.props.index +' - '+ this.props.lesson.title)
  }
  render(){
    const {lesson}=this.props;
    return(
        <div onClick={this.handleClick.bind(this)}>
           <h1 >{lesson.title}</h1>
           <p>{lesson.description}</p>
        </div>
    )
  }
}
class LessonsList extends Component{
   render(){
     return(
       <div>
         {this.props.lessons.map((lesson,i)=><Lesson lesson={lesson} key={i} index={i}/>)}
       </div>
     )
   }
}