Question

目前，我正在努力迭代包含带有对象的数组的对象。（和嵌套的）我试图在React中创建一个通用的表组件，以便它可以被许多视图使用。

我设置了什么？

tableData.map((prop, key) => {
  return (
    <TableRow key={key}>
      <TableCell className={classes.tableCell} key={key}>
        {prop.number}
      </TableCell>
      <TableCell className={classes.tableCell} key={key}>
        {prop.TableType.max_occupancy}
      </TableCell>
      <TableCell className={classes.tableCell} key={key}>
        {prop.price}
      </TableCell>
      <TableCell className={classes.tableCell} key={key}>
        {prop.TableType.description}
      </TableCell>
      <TableCell className={classes.tableCell} key={key}>
        <Button fullWidth color="primary">
          Remove
        </Button>
      </TableCell>
    </TableRow>
  );
})

我现在面临的问题是什么？

我无法以动态方式创建上面的内容。我遇到了几个问题，例如：

嵌套对象逻辑
逻辑不应与其他页面中的其他实现冲突。（反应）

我想要达到什么目标？

我希望获得通用的东西，并且可以在各种场景中使用，并且不会与使用此组件的其他页面发生冲突。

最后它应该以可视方式看起来像这样：

我有哪些数据？

[
    {
        "id": 1,
        "number": 1,
        "status": true,
        "price": 12,
        "table_type_id": 1,
        "venue_id": 1,
        "TableType": {
            "id": 1,
            "description": "Small Table",
            "max_occupancy": 3
        }
    },
    {
        "id": 2,
        "number": 2,
        "status": true,
        "price": 2,
        "table_type_id": 2,
        "venue_id": 1,
        "TableType": {
            "id": 2,
            "description": "Medium Table",
            "max_occupancy": 6
        }
    }
]

带有完整项目的Codesandbox目录： https://codesandbox.io/embed/lwzz4j9mz?autoresize=1&eslint=1 我们谈论的填充位于Components / Table / Table.jsx。（我在注释中添加了一些需要解析为表行和单元格的虚拟数据）

需要在视图中使用的属性：

号
价
ID
TABLETYPE

希望有人可以提出一个明智的想法来帮助我解决这个问题！为所有帮助干杯，希望我们能够一起解决这个问题。

Answer 1

您应该使用外部库来完成此操作。但如果你想采用内部方法，这将是一种方法。

向组件发送数据和标头。标头还应指定如何解析数据以接收数据的值。

var defaultTemaplate = '<TableRow><TableCell style={{ textAlign: "center" }}>Woooops! You haven\'t applied any tables for this venue yet. To start renting out tables you should add at least 3 tables tothe app. Just press the button above to start imediately.</TableCell></TableRow>'
var tableHead = [{
    title: 'number',
    type: 'data',
    path: 'number'
  },
  {
    title: 'TableType',
    type: 'data',
    path: 'TableType.description'
  },
  {
    title: 'Edit/delete',
    type: 'template',
    templateString: '<button></button>'
  }
] //for all columns
var tableData = [{
    "id": 1,
    "number": 1,
    "status": true,
    "price": 12,
    "table_type_id": 1,
    "venue_id": 1,
    "TableType": {
      "id": 1,
      "description": "Small Table",
      "max_occupancy": 3
    }
  },
  {
    "id": 2,
    "number": 2,
    "status": true,
    "price": 2,
    "table_type_id": 2,
    "venue_id": 1,
    "TableType": {
      "id": 2,
      "description": "Medium Table",
      "max_occupancy": 6
    }
  }
]
console.log(genRows(tableData))

function getTableCells(data) {
  return tableHead.map((opts) => {
    if (opts.type === 'data') {
      return `<TableCell className={classes.tableCell}>${_.at(data, opts.path)}</TableCell>`
    }
    if (opts.type === 'template') {
      return opts.templateString
    }
  })
}

function genRows(tableData) {
  if (tableData.length < 0) return defaultTemaplate;
  return tableData.map((rowData) => `<TableRow>${getTableCells(rowData)}</TableRow>`)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.js"></script>

这只是一个示例，展示了您可以采取的一种方法，而不是完整的代码，并且可以进行彻底的改进。

如何通常使用对象数组创建表格单元格和行

1 个答案: