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.values(obj)，它接收一个对象并返回该对象中每value个key: value的数组。

所以你可以这样做：

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

您始终可以在地图之前对Object.values(row)返回的数组进行排序。但无论如何，我认为订单非常一致。或者，您可以将row对象解析为按所需方式排序的数组，然后执行sortedRow.map(...)。

但是，我们开始只获得一行代码而不仅仅是一行代码，我们不是吗？你的写作方式更快，阅读更简单，但这样做的方式稍后可以保养得更好，无论你最喜欢什么都是可行的。

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

1 个答案: