返回一组<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>
    );
  }