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

我知道这很容易，但我一直坚持这一点： 我想创建一个表，严格来说，它有两列，每列有许多行。我确信每列都有许多行。此外，每列将有不同的编号或行：

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

身份证件
名称
地位
1.
约翰·史密斯
雇佣
2.
兰德尔·怀特
失业的
3.
斯蒂芬妮·桑德斯
雇佣
4.
史蒂夫·布朗
雇佣
5.
克里斯托弗·诺兰
失业的

---

材质UI表组件如下所示。有什么想法吗？

您可以将人员数据存储到一个数组中，然后将其映射到一个新的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>
);
[...]

[…]
让人=[{
id:1，
姓名：“约翰·史密斯”，
状态：“已雇用”
}, [...] ];
让行=persons.map（函数（person））{
返回(
{person.id}
{person.name}
{个人状态}
);
});
[...]
render（）{
返回(
身份证件
名称
地位
{rows}
);
[...]

---

我没有对其进行测试，但它可能会帮助您走上正确的道路。

您可以将人员数据存储到一个数组中，然后将其映射到一个新的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>
);
[...]

[…]
让人=[{
id:1，
姓名：“约翰·史密斯”，
状态：“已雇用”
}, [...] ];
让行=persons.map（函数（person））{
返回(
{person.id}
{person.name}
{个人状态}
);
});
[...]
render（）{
返回(
身份证件
名称
地位
{rows}
);
[...]

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