渲染列表

在 React 中我们习惯用 map() 方法来代替循环语句渲染多个对象，下例我们渲染一个学生列表：

import React, { Component } from 'react';

// 学生列表
const students = [
  {
    id: 1, 
    name: 'tom',
    grade: 3
  },
  {
    id: 2, 
    name: 'jimmy',
    grade: 3
  },
  {
    id: 3, 
    name: 'tony',
    grade: 5
  }
]

class Students extends Component {
  state = {
    students: students
  };

  handleClick = (student) => {
    console.log(student);
  };

  render() {
    return (
      <React.Fragment>
        <p>showing { this.state.students.length } students in database.</p>
        <table>
          <thead>
            <tr>
              <th>Id</th>
              <th>Name</th>
              <th>Grade</th>
              <th></th>
            </tr>
          </thead>    
          <tbody>
            { this.state.students.map(student => (
              <tr key={ student.id }>
                <td>{ student.id }</td>
                <td>{ student.name }</td>
                <td>{ student.grade }</td>
                <td>
                  <button onClick={ () => this.handleClick(student) }>
                    Click
                  </button>
                </td>
              </tr>
              ))}
          </tbody>          
        </table>
      </React.Fragment>
      
    );
  };
}

export default Students;

注意 <tr key={ student.id }>，对于类似于列表的多个元素的结构，React 要求我们使用 key 关键字来区分彼此。

点击 Click 能输出对应的 student 对象。