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

【问题标题】：How to generate table rows dynamically using react.js如何使用 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。
上面没有代码

标签： javascript node.js reactjs iteration

【解决方案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'],
    [...],
]

【讨论】：