Javascript 如何使用对象数组一般创建表单元格和行

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

我设置了什么

包含完整项目的Codesandbox目录： 我们讨论的填充位于Components/Table/Table.jsx。我在注释中添加了一些虚拟数据，这些数据需要解析为表行和单元格

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

数字 价格 身份证件 表格类型

---

希望有人能想出一个聪明的主意来帮助我解决这个问题！为所有的帮助干杯，希望我们能一起解决这个问题

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

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

var defaultTemaplate='wooops！您尚未为此场地申请任何桌子。要开始出租桌子，您应该在应用程序中至少添加3张桌子。只要按上面的按钮就可以立即启动 var表格头=[{ 标题:"数字",， 键入：“数据”， 路径：“编号” }, { 标题：“表格类型”， 键入：“数据”， 路径：“TableType.description” }, { 标题：“编辑/删除”， 键入：“模板”， 模板字符串： } ]//对于所有列 var表格数据=[{ id:1， 编号：1， 状态：正确， 价格：12， 表\u类型\u id:1， 地点:1,， 表格类型：{ id:1， 说明：小桌子， 最高入住率：3 } }, { id:2， 编号：2， 状态：正确， 价格:2,， 表\u类型\u id:2， 地点:1,， 表格类型：{ id:2， 说明：中表， 最高入住率：6 } } ] console.loggenRowstableData 函数getTableCellsdata{ return tableHead.mapopts=>{ 如果opts.type==“数据”{ 返回`${.atdata，opts.path}` } 如果opts.type==“模板”{ 返回opts.templateString } } } 函数genRowstableData{ 如果tableData.length<0，则返回DefaultTemplate； return tableData.maprowData=>`${getTableCellsrowData}` }

---

我认为添加您尝试的链接是一个好主意当存在嵌套逻辑时，行为应该是什么？是否可以保证嵌套属性始终是对象，或者它们可能是eg数组的其他属性？一般来说，不要为列表中的每个组件提供相同的键。组件列表的键属性的目的是帮助区分它们。如果他们都一样，那就行不通了。具体来说，您面临哪些问题？你说嵌套对象逻辑，什么逻辑？它们只是简单的密钥对对象，那么访问它们的值意味着什么呢？您还说过逻辑不应该与其他实现冲突，当我们没有应用程序其余部分的任何上下文时，这对我们来说是很难帮助的。我会使用第三方，如react table，这是您的请求，以使其更干燥，并让表的父级指定如何访问每个单元格中的每个数据，而不是对其进行硬编码？当数组。这不是一个经过充分测试的代码。这只是一个简单的代码来展示你可以采取的方法让我来纠正它。啊，我明白了，很抱歉！你介意看一下吗？这给了我一个很好的方向，但我还是被卡住了。那我就接受答案了！：先生，这是一个典型的===和=:P的混乱。我现在已经改正了。调整它以做出反应取决于你；如果使用这些LIB中的任何一个，您可以将其替换为lodash at或ramda的路径

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
        }
    }
]