返回一组<td>单元格

Question

我正在映射我的出勤对象数组，并尝试在存在出勤记录时返回<td></td>单元格，并在不存在考勤记录时返回空<td></td>单元格。如果存在出勤记录，我目前只能返回<td></td>单元格。如何返回空<td></td>单元格？

路径：file.jsx

render() {
return (
<div className="mt-3">
<Table hover>
<thead>
<tr>
<th className="border-top-0 pt-0">Absent</th>
<th className="border-top-0 pt-0">Present</th>
</tr>
</thead>
<tbody>
{this.props.studentUserProfiles.map(studentUserProfile => (
<tr key={studentUserProfile._id}>
{this.props.attendances.map((attendance) => {
if (attendance.studentUserProfileId === studentUserProfile._id) {
return (
<React.Fragment key={attendance._id}>
<td>{attendance.absentRollCallTeacherUserId ? 'True' : null}</td>
<td>{studentUserProfile.presentRollCallTeacherUserId ? 'True' : null}</td>
</React.Fragment>
);
}
})}
</tr>
))}
</tbody>
</Table>
</div>
);
}

Answer 1

也许这会帮助你

{this.props.studentUserProfiles.map(studentUserProfile => (
<tr key={studentUserProfile._id}>
{this.props.attendances.find(attend => studentUserProfile._id === attend.id) ? this.props.attendances.map((attendance) => {
if (attendance.studentUserProfileId === studentUserProfile._id) {
return (
<React.Fragment key={attendance._id}>
<td>{attendance.absentRollCallTeacherUserId ? 'True' : null}</td>
<td>{studentUserProfile.presentRollCallTeacherUserId ? 'True' : null}</td>
</React.Fragment>
);
}
}) : (
<React.Fragment>
<td></td>
<td></td>
</React.Fragment>
)}
</tr>
))}

Answer 2

只需在循环开始之前检查this.props.attendance的长度，并使用JSX返回所需的标记。

render() {
return (
<div className="mt-3">
<Table hover>
<thead>
<tr>
<th className="border-top-0 pt-0">Absent</th>
<th className="border-top-0 pt-0">Present</th>
</tr>
</thead>
<tbody>
{this.props.studentUserProfiles.map(studentUserProfile => (
<tr key={studentUserProfile._id}>
{ this.props.attendance.length > 0 &&
<React.Fragment>
{this.props.attendances.map((attendance) => {
return (
<React.Fragment key={attendance._id}>
{attendance.studentUserProfileId == studentUserProfile._id &&
<td>{attendance.absentRollCallTeacherUserId ? 'True' : null}</td>
<td>{studentUserProfile.presentRollCallTeacherUserId ? 'True' : null}</td>
}
{attendance.studentUserProfileId != studentUserProfile._id &&
<td></td>
<td></td>
}
</React.Fragment>
);
})}
</React.Fragment>
}
{ this.props.attendance.length == 0 &&
<React.Fragment >
<td></td>
<td></td>
</React.Fragment>
}
</tr>
))}
</tbody>
</Table>
</div>
);
}