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>

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

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

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

在材料ui中创建一个包含两列和多行的表

1 个答案: