javascript - 从嵌套数组中 react DataTable 值

Question

请看我的代码:

import React, { Component } from 'react';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';

class App extends Component {
  constructor() {
    super();
    this.state = {
        student: [  
          {  
             "studentName":"Jack",
             "stdCtExamMarks":[  
                {  
                   "subjectName":"English "
                }
             ]
          },
          {  
             "studentName":"John",
             "stdCtExamMarks":[  
                {  
                   "subjectName":"Bangla "
                }
             ]
          }
       ]
    };
}
  render() {

    return (
      <div className="App">
    <BootstrapTable data={this.state.student} >
      <TableHeaderColumn dataField="studentName" isKey={true} dataAlign="center" dataSort={true}>Name</TableHeaderColumn>
      <TableHeaderColumn dataField="stdCtExamMarks.subjectName" dataSort={true}>Subject</TableHeaderColumn>

  </BootstrapTable>
      </div>
    );
  }
}

export default App;

在表中，我可以获得 StudentName 的值，但我也需要 subjectName 值。我怎样才能做到这一点？

当我将“studentName”放入数据字段时，它就可以正常工作，但“stdCtExamMarks”的嵌套数组不会在字段中抛出任何值

Answer 1

我以前没有使用过此控件，但根据文档，您也许可以使用 TableHeaderColumn 的 dataFormat 属性。像这样的事情:

subjectFormatter(cell, row) {
  return cell[0].subjectName
}

render(){
  return (
    ...
    <TableHeaderColumn dataField="stdCtExamMarks" dataFormat={this.subjectFormatter} dataSort={true}>Subject</TableHeaderColumn>
    ...
  )
}

请注意，stdCtExamMarks 是一个数组，正如您在上面所描述的那样，因此我使用了索引0，但您可能想要得到不同的东西。