Question

我有一个类似于以下内容的javascript对象：

    const relevantTags = {
        "tags": {
            date: {
                day: "day",
                month: "month",
                year: "year"
            },
            time: {
                hours: "hours",
                minutes: "minutes"
            },
            adm: {
                admId: "adm-id"
            },
            document: {
                documentId: "document-id",
                documentGeneratedBy: "document-generated-by",
                approvalStatus: "approval-status"
            },
            department: {
                departmentName: "department-name"
            }
        }
}

这里的键date，time，adm，document和department是表标题，每个表标题对象的值是列价值观。例如，当列标题为document时，其列的值之一为document-generated-by。同样，当列标题为department时，其列值之一为department-name。可以看出，某些列比其他列具有更多的值。

我正在尝试从此javascript对象生成表。

我将表头生成为：

 const tableHead = (
  <thead>
    <tr>
      {Object.keys(relevantTags.tags).map(pts => (
        <th scope="col">{pts}</th>
      ))}
    </tr>
  </thead>
);

我不确定如何生成表格行/列。我该怎么办？我想创建一个动态表，类似于我在下面给出的代码段：

<table>
  {tableHead}
  <tbody>
    {tableRows}
  </tbody>
</table>

注意：javascript对象中的所有键都是动态的，并且不是固定的。它们可能有时会出现/不存在，具体取决于某些配置。

基于列数的表看起来类似于：

如您所见，与其他列相比，时间列的行数更多。

对于上述数据结构表，其外观类似于：

date  time    adm     document              department

day   hours   adm-id  document-id           department-name
month minutes         document-generated-by
year                  approval-status

Answer 1

如@trixn所建议，flexbox更适合这种情况。

您可以通过以下方式进行处理：

 const flexHead = (
    <div className="d-flex flex-row flex-wrap">
        {Object.keys(relevantTags.tags).map(pts => (
        <div className="p-d-1">
            <span className="uppercase muted small">{pts}</span>
            <div className="d-flex flex-column">
            {Object.values(relevantTags[pts]).map(dts => (
                <div className="p-d-1">
                <Tag onClick={this.onTagSelection} color="blue">
                    {dts}
                </Tag>
                </div>
            ))}
            </div>
        </div>
        ))}
    </div>
    );

以下是相应的CSS：

        .d-flex {
            display: flex!important;
        }

        .flex-column {
            -webkit-box-orient: vertical!important;
            -webkit-box-direction: normal!important;
            -ms-flex-direction: column!important;
            flex-direction: column!important;
        }

        .flex-row {
            -webkit-box-orient: horizontal!important;
            -webkit-box-direction: normal!important;
            -ms-flex-direction: row!important;
            flex-direction: row!important;
        }

        .flex-wrap {
            -ms-flex-wrap: wrap!important;
            flex-wrap: wrap!important;
        }

        .p-d-1 {
           padding: 0.10rem !important;
        }

        .muted {
          color: #6c757d !important;
          font-family: "Muli"
        }

        .small {
           font-size: 85%;
           font-weight: 400;
        }

然后可以在渲染方法中直接使用flexHead。对于我创建的模拟，结果如下：

当某些列的数据丢失时在表中创建行

1 个答案: