如何从 json 数组中渲染表格？ [复制]

【问题标题】：How to render table from json array? [duplicate]如何从 json 数组中渲染表格？ [复制]
【发布时间】：2019-08-29 17:37:08
【问题描述】：

我有 JSON 数组，我需要使用 React 将它呈现到表格中

lockers: [
        { id: 1, status: 0, size: "s" },
        { id: 2, status: 0, size: "m" },
        { id: 3, status: 0, size: "l" },
        { id: 4, status: 0, size: "s" },
        { id: 5, status: 0, size: "m" },
        { id: 6, status: 0, size: "l" },
        { id: 7, status: 0, size: "s" },
        { id: 8, status: 0, size: "m" },
        { id: 9, status: 0, size: "l" },
        { id: 10, status: 0, size: "s" },
        { id: 11, status: 0, size: "m" },
        { id: 12, status: 0, size: "l" },
        { id: 13, status: 0, size: "xl" }
      ]

我希望是这样的输出，请帮忙

s    m   l  xl
1    2   3   13
4    5   6   -
7    8   9   -
10   11  12  -

【问题讨论】：

请向我们展示您的解决方案，以便我们将其作为讨论的起点。

标签： javascript json reactjs

【解决方案1】：

首先将数据插入到像“数据”这样的变量中：

var data = [
  {id: 1, status: 0, size: 'xl'},
];

然后创建一个方法来显示你的 json 数据：

class App extends Component {
  displayTable() {
    return (
      <div className="App">
        <p className="Table-header">Table</p>
        <Table1 data={data}/>
      </div>
    );
  }

使用您使用“react-bootstrap-table”创建的方法显示您的表格

class Table1 extends Component {
  displayTable() {
    return (
      <div>
        <BootstrapTable data={this.props.data}>
          <TableHeaderColumn isKey dataField='id'>
            ID
          </TableHeaderColumn>
          <TableHeaderColumn dataField='status'>
            Status
          </TableHeaderColumn>
          <TableHeaderColumn dataField='size'>
            Size
          </TableHeaderColumn>
        </BootstrapTable>
      </div>
    );
  }
}

导出默认Table1；

【讨论】：