美文网首页
渲染列表

渲染列表

作者: SingleDiego | 来源:发表于2019-03-05 10:59 被阅读0次

    在 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 对象。

    相关文章

      网友评论

          本文标题:渲染列表

          本文链接:https://www.haomeiwen.com/subject/kxlnuqtx.html