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

Question

目前，我正在生成表头和行，但我希望使行更具动态性。如何在不重复一次的情况下打印行的数据？我怎样才能像标题一样使用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>

Answer 1

我不会这样使用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'],
    [...],
]

Answer 2

您可以使用Object.values（obj），它接收一个对象并返回该对象中每个键：值的每个值的数组。

所以你可以这样做：

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

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

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