Question

我有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  -

Answer 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>
    );
  }
}

导出默认表1；

如何从JSON数组渲染表？

1 个答案: