代码之家 › 专栏 › 技术社区 › bp123

返回一组<td>单元格

reactjs

bp123 · 技术社区 · 8 年前

我正在绘制我的出席对象数组并试图返回 <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>
  );
}

2 回复 | 直到 8 年前

Tan Duong 8 年前

也许这能帮到你

{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>
))}

Subhanshu 8 年前

只要检查一下 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>
    );
  }