如何使用 react.js 动态生成表行

Posted 2023-02-21

【中文标题】如何使用 react.js 动态生成表行

【英文标题】：How to generate table rows dynamically using react.js

【发布时间】：2017-11-26 08:28:03

【问题描述】：

目前，我正在生成表头和行，但我想让行更加动态。如何在不重复多次的情况下打印行的数据？我怎样才能像标题一样使用 1 语句来做到这一点？所以基本上我只会调用'row'，它应该生成行包含的所有内容，而不必输入'row.school'等......

const schoolData = [
  school : 'Middle School', year : '2017', date : '6/12/17', location : 
'Class',,
 school : 'High School', year : '2017', date : '2/24/17', location : 
'Gym',,

];


export default class Table extends Component 

render() 
const headers = Object.keys(schoolData[0]).map(header => 
<TableHeaderColumn>header</TableHeaderColumn>);

return (
  <Tabs>
<Tab label="School Type">
<Table>
  <TableHeader>
    <TableRow>
      header
    </TableRow>
  </TableHeader>
  <TableBody>
    schoolData.map( (row) => (
      <TableRow>
        <TableRowColumn>row.school</TableRowColumn>
        <TableRowColumn>row.year</TableRowColumn>
        <TableRowColumn>row.date</TableRowColumn>
        <TableRowColumn>row.location</TableRowColumn>
      </TableRow>
      ))
  </TableBody>
</Table>

【问题讨论】：

发布TableRow 组件的代码。您可能会做的是修改该类，以便您可以简单地向它传递一个“行”对象并在内部构造自己的TableRowColumns。

上面没有代码

【参考方案1】：

您可以使用Object.values(obj)，它接收一个对象并返回该对象中每个key: value 的每个value 的数组。

所以你可以这样做：

schoolData.map(row => (
  <TableRow>
    Object.values(row).map(rowValue => 
      <TableRowColumn>rowValue</TableRowColumn>
    )
  </TableRow>
))

您始终可以在映射之前对Object.values(row) 返回的数组进行排序。但无论如何我认为顺序是相当一致的。或者您可以将您的row 对象解析为一个按您想要的方式排序的数组，然后执行sortedRow.map(...)。

但是我们开始得到的不仅仅是一行代码，不是吗？你的方式写起来更快，读起来更简单，但这样做以后更容易维护，最适合你的就是要走的路。

【参考方案2】：

我不会以这种方式使用Object.keys。 Object.keys的输出是任意排序的，不保证在相同形状的对象之间是一致的：

Object.keys(foo: 'foo', bar: 'bar', baz: 'baz')
// -> ["foo", "bar", "baz"]
Object.keys(bar: 'bar', baz: 'baz', foo: 'foo')
// -> ["bar", "baz", "foo"]
Object.keys( baz: 'baz', bar: 'bar', foo: 'foo')
// -> ["baz", "bar", "foo"]

有很多方法可以解决这个问题。一种方法是简单地将多维数组传递给组件：

[
    ['header1', 'header2', 'header3', 'header 4'],
    ['row 1 cell 1', 'row 1 cell 2', 'row 1 cell 3', 'row 1 cell 4'],
    [...],
]