在材质ui中制作一个两列多行的表格答案

【问题标题】：Make a table with two columns and many rows in material ui在材质ui中制作一个两列多行的表格
【发布时间】：2018-01-26 08:37:41
【问题描述】：

我知道这很容易，但我坚持这样做：我想创建一个表，该表将严格包含两列，每列将有很多行。我确信每一列都会有很多行。此外，每一列都有不同的数量或行数：

<Table>
    <TableHeader>
      <TableRow>
        <TableHeaderColumn>ID</TableHeaderColumn>
        <TableHeaderColumn>Name</TableHeaderColumn>
        <TableHeaderColumn>Status</TableHeaderColumn>
      </TableRow>
    </TableHeader>
    <TableBody>
      <TableRow>
        <TableRowColumn>1</TableRowColumn>
        <TableRowColumn>John Smith</TableRowColumn>
        <TableRowColumn>Employed</TableRowColumn>
      </TableRow>
      <TableRow>
        <TableRowColumn>2</TableRowColumn>
        <TableRowColumn>Randal White</TableRowColumn>
        <TableRowColumn>Unemployed</TableRowColumn>
      </TableRow>
      <TableRow>
        <TableRowColumn>3</TableRowColumn>
        <TableRowColumn>Stephanie Sanders</TableRowColumn>
        <TableRowColumn>Employed</TableRowColumn>
      </TableRow>
      <TableRow>
        <TableRowColumn>4</TableRowColumn>
        <TableRowColumn>Steve Brown</TableRowColumn>
        <TableRowColumn>Employed</TableRowColumn>
      </TableRow>
      <TableRow>
        <TableRowColumn>5</TableRowColumn>
        <TableRowColumn>Christopher Nolan</TableRowColumn>
        <TableRowColumn>Unemployed</TableRowColumn>
      </TableRow>
    </TableBody>
  </Table>

材质 UI 表格组件就是这些。有什么想法吗？

【问题讨论】：

标签： javascript material-design material-ui xmltable

【解决方案1】：

您可以将人员数据存储到一个数组中，然后将它们映射到一个新的反应组件数组中，然后可以呈现：

[...]

let persons = [{
id: 1,
name: 'John Smith',
status: 'Employed' 
}, [...] ];

let rows = persons.map(function(person){
    return (
        <TableRow>
            <TableRowColumn>{person.id}</TableRowColumn>
            <TableRowColumn>{person.name}</TableRowColumn>
            <TableRowColumn>{person.status}</TableRowColumn>
        </TableRow>
    );
});

[...]

render() {
    return (
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHeaderColumn>ID</TableHeaderColumn>
                    <TableHeaderColumn>Name</TableHeaderColumn>
                    <TableHeaderColumn>Status</TableHeaderColumn>
                </TableRow>
            </TableHeader>
           <TableBody>
               {rows}
           </TableBody>
        </Table>
);
[...]

我没有测试它，但也许它可以帮助你走上正轨。

【讨论】：