javascript - 在material ui中制作一个两列多行的表格

Question

我知道这很容易，但我坚持这个:我想创建一个只有两列的表，每列都有很多行。我确信每一列都会有很多行。此外，每列都有不同的数字或行:

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

Material UI 表组件是这些。有什么想法吗？

Answer 1

您可以将人员数据存储到一个数组中，然后将它们映射到一个新的 react 组件数组中，然后可以渲染:

[...]

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>
);
[...]

我没有测试它，但也许它可以帮助您走上正确的道路。