Question

我在props.logsInfo.logs的道具中得到了数组，我想根据数组中元素的数量使用它，而不是像props.logsInfo.logs[0]['id']那样对其进行硬编码。我想使用map。日志数组的大小可以大于一个。我不想再写一个单元格： {key：'cell-0'，children：props.logsInfo.logs [1] ['id']}，我如何实现？

import React from 'react';
import Table from 'terra-table';
const StripedTable = props => (
  <Table
    summaryId="striped-table"
    summary="This table displays striped rows."
    numberOfColumns={4}
    dividerStyle="horizontal"
    headerData={{
      cells: [
        { id: 'header-Id', key: 'id', children: 'Id' },
        { id: 'header-vendorId', key: 'vendorId', children: 'VendorId' },
        { id: 'header-userId', key: 'userId', children: 'UserId' },
        { id: 'header-payLoad', key: 'payLoad', children: 'PayLoad' },
      ],
    }}

    bodyData={[
      {
        rows: [
          {
            key: 'row-0',
            cells: [
              { key: 'cell-0', children: props.logsInfo.logs[0]['id'] },
              { key: 'cell-1', children: props.logsInfo.logs[0]['vendorId'] },
              { key: 'cell-2', children: props.logsInfo.logs[0]['userId'] },
              { key: 'cell-3', children: props.logsInfo.logs[0]['payLoad']},
            ],
          },
        ],
      },
    ]}
  />
);
export default StripedTable;

Answer 1

是的，您可以使用$：

.map

如果您将字段名称保留在数组附近，也可以对单元格执行相同操作：

 bodyData={[
      {
        rows: props.logsInfo.logs.map(log => ({
          key: log.id,
          cells: [
            { key: 'cell-0', children: log.id },
            { key: 'cell-1', children: log.vendorId },
            { key: 'cell-2', children: log.userId },
            { key: 'cell-3', children: log.payLoad},
          ],
        }),
      },
    ]}

在功能组件中使用道具

1 个答案: