使用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>
     )
   }
}