如何在reactjs中创建动态Row / Col表

Question

我试图使用react渲染表，有三个实体，Criteria（Row），Rating（Col）和解释（在它们的交叉点）。 可以添加行/列

我能够渲染标准，评级和解释，但如果解释不存在，我想添加/弹出按钮。

对于前用例

      R1   R2    R3    R+
C1    E1   E2     
C2         E3
C+

在所有空白的地方，我想添加一个popover来添加说明。

我正在使用reactjs，graphql，ant-d，以下是循环的代码

return (
  <div>

    {
      <FlexRow>
        {" "}
        <FlexCol key={"rating.id"} span={24 / (ratings.length + 2)}>
          <CriteriaRatingBox>
            <CriteriaRatingTitle>{"index"}</CriteriaRatingTitle>
          </CriteriaRatingBox>
          {ratings.map((rating, i) => (
            <CriteriaRatingBox>
              <CriteriaRatingTitle>{rating.title}</CriteriaRatingTitle>
            </CriteriaRatingBox>
          ))}
          <CriteriaRatingBox>
            <Popover
              content={
                <RubricRatingsForm
                  requirementId={this.props.requirementContextId}
                  handleMcAddRubricRating={
                    this.props.handleMcAddRubricRating
                  }
                />
              }
            >
              <CriteriaRatingTitle>{"+Add Rating"}</CriteriaRatingTitle>
            </Popover>
          </CriteriaRatingBox>
        </FlexCol>
      </FlexRow>
    }
    {criteria.map((criteria, i) => (
      <FlexRow>
        <FlexCol key={criteria.id}>
          <CriteriaBox>{criteria.description}</CriteriaBox>
        </FlexCol>

        {ratings.map((rating, i) => (
          <div>
            <FlexCol key={rating.id} span={24 / ratings.length + 1}>
              <CriteriaRatingBox>
                {criteria.explanations.map((explanation, i) => (
                  <Popover
                    content={
                      <EditRubricExplanationForm
                        handleEditRubricExplanation={
                          this.props
                            .handleMcRequirementEditRubricExplanation
                        }
                        rubricExplanation={explanation.description}
                        rubricExplanationId={explanation.id}
                        toggleEditRubricExplanationOpen={
                          this.toggleEditRubricExplanationOpen
                        }
                      />
                    }
                  >
                    <CriteriaExplanation>
                      {explanation.rating.id === rating.id &&
                      explanation.criteria.id === criteria.id && (
                        <RichTextEditor rawData={explanation.description} />
                      )}
                    </CriteriaExplanation>
                  </Popover>
                ))}
              </CriteriaRatingBox>
            </FlexCol>
          </div>
        ))}
      </FlexRow>
    ))}

    <FlexRow>
      <FlexCol>
        <Popover
          content={
            <RubricCriteriaForm
              requirementId={this.props.requirementContextId}
              handleMcAddRubricCriteria={
                this.props.handleMcAddRubricCriteria
              }
            />
          }
        >
          <CriteriaBox>{"+ Add-Criteria"}</CriteriaBox>
        </Popover>
      </FlexCol>
    </FlexRow>
  </div>
);