在 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 对象。
网友评论