无法访问react-bootstrap-table中的嵌套字段

Vin*_*ent 6 javascript reactjs react-bootstrap-table

Mongo数据库可以返回具有嵌套数据的数组.我想显示以下内容中包含的数据:{applications:{data:{description:'我的说明}}}

但它根本不起作用.你有关于怎么做的想法,我在doc或SO中都没有发现任何东西.

const Applications = (props) => (
  <div className="applications">
    {props.applications.length === 0 ?
      <div>Aucune candidature</div>
      : <BootstrapTable data={props.applications} striped={true} hover={true}>
        <TableHeaderColumn dataField="_id" isKey={true} dataAlign="center" dataSort={true}>Title</TableHeaderColumn>
        <TableHeaderColumn dataField="status">Candidat</TableHeaderColumn>
        <TableHeaderColumn dataField="data.description" dataSort={true}>description</TableHeaderColumn>
      </BootstrapTable>
    }
  </div>
)
Run Code Online (Sandbox Code Playgroud)

谢谢你的帮助 ;)

Vin*_*ent 12

几分钟后,我找到了一个解决方案:我必须使用自定义dataFormatter,如文档的这一部分所示:https: //github.com/AllenFang/react-bootstrap-table#quick-demo

只需传递单元格中的对象,然后使用格式化程序提取所需的数据

所以,这是我的最终代码:

function showDescription(cell, row) {
  return cell.description;
}

const Applications = (props) => (
  <div className="applications">
    {props.applications.length === 0 ?
      <div>Aucune candidature</div>
      : <BootstrapTable data={props.applications} striped={true} hover={true}>
        <TableHeaderColumn dataField="_id" isKey={true} dataAlign="center" dataSort={true}>Title</TableHeaderColumn>
        <TableHeaderColumn dataField="status">Candidat</TableHeaderColumn>
        <TableHeaderColumn dataField="data" dataSort={true} dataFormat={showDescription}>description</TableHeaderColumn>
      </BootstrapTable>
    }
  </div>
)
Run Code Online (Sandbox Code Playgroud)