我需要帮助生成标题。 使用react.js

Question

I am trying to create a table using objects right now my table generates the table rows but I also want it to generate the table header using the same object, right now the table header is being hard coded, if someone could help me with how to generate the table header inside the same object 'schoolData'.

//Rows

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 TableComplex extends Component {

  render() {
    return (
      <Tabs>
    <Tab label="School Type">
    <Table>
      <TableHeader displaySelectAll={false} adjustForCheckbox={false}>
        <TableRow>
          <TableHeaderColumn>School</TableHeaderColumn>
          <TableHeaderColumn>Year</TableHeaderColumn>
          <TableHeaderColumn>Date</TableHeaderColumn>
          <TableHeaderColumn>Location</TableHeaderColumn>
        </TableRow>
      </TableHeader>
      <TableBody displayRowCheckbox={false}>
        {schoolData.map( (row) => (
          <TableRow>
            <TableRowColumn>{row.school}</TableRowColumn>
            <TableRowColumn>{row.year}</TableRowColumn>
            <TableRowColumn>{row.date}</TableRowColumn>
            <TableRowColumn>{row.location}</TableRowColumn>
          </TableRow>
          ))}
      </TableBody>
    </Table>
  </Tab>

  </Tabs>

);
  }
}

Answer 1

您可以使用对象键

for ( property in schoolData[0] ) { console.log( property ); }

Answer 2

You can use object.keys on on the first element of school data and map TableHeaderColumn

 const schoolData = [ { school : 'Middle School', year : '2017', date : '6/12/17', location : 'Class',}, { school : 'High School', year : '2017', date : '2/24/17', location : 'Gym',}, ]; // declare this in render method const headers = Object.keys(schoolData[0]).map(header => <TableHeaderColumn>{header}</TableHeaderColumn>); // put it in your react component <TableHeader displaySelectAll={false} adjustForCheckbox={false}> <TableRow> { headers } </TableRow> </TableHeader> // for TableRows const rows = (row) => Object.keys(row).map(r => <TableRowColumn>{row[r]}</TableRowColumn>); <TableRow> {rows(row)} </TableRow>