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

Question

Mongo数据库可以返回包含嵌套数据的数组。我想要显示包含在：{applications：{ data：{description：'My 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>
)

​

感谢您的帮助;)

Answer 1

几分钟后，我找到了一个解决方案:我必须使用文档的这一部分中所示的自定义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>
)

​

Answer 2

我有一个类似的用例，我得到一个Address对象，它是一个JSON，我必须将该地址格式化为人类可读的(通用地址)格式，并将其提供给计算单元。React Bootstrap Table在TableHeaderColumn组件上有一个名为'dataFormat‘的属性，它接受一个函数(或字符串，我对字符串不确定)，并相应地格式化数据。我的示例代码如下所示。(可能有一些语法错误，我没有在集成开发环境:#中键入，希望你能找出这些错误；)

render: function () {
const addressFormatter = function (address) {
    return !address ? null : `<div>
                    <div><br>${address.contactName}</br></div>
                    <div><br>${address.address1}</br></div>
                    <div><br>${address.address2}</br></div>
                    <div><br>${address.city}, ${address.state} ${address.zip}. USA</br></div>
                 </div>`;
};

return (
    <div>
        <BootstrapTable data={this.state.districts}>
            <TableHeaderColumn dataField='name' isKey={true} dataAlign='center'
                               tdStyle={{whiteSpace: 'normal', verticalAlign: 'middle'}}>Name</TableHeaderColumn>
            <TableHeaderColumn dataField='shippingAddress' dataAlign='left'
                               tdStyle={{whiteSpace: 'normal', lineHeight: '10px', verticalAlign: 'middle'}}
                               dataFormat={ addressFormatter }>Shipping Info</TableHeaderColumn>
            <TableHeaderColumn dataField='mailingAddress' dataAlign='left'
                               tdStyle={{whiteSpace: 'normal', lineHeight: '10px', verticalAlign: 'middle'}}
                               dataFormat={ addressFormatter }>Mailing Info</TableHeaderColumn>
        </BootstrapTable>
    </div>
);

}

Answer 3

我用https://github.com/AllenFang/react-bootstrap-table/做过类似的事情

为了深入到嵌套字段，我传递了string，然后返回键/值对。

const nestedFields = (data, row, field) => {
  let nested_field = field.split(',');
  return data[nested_field[0]][nested_field[1]];
}

<TableHeaderColumn row='1' dataField="torque_sensor" formatExtraData="top_hits,process" dataFormat={nestedFields} dataSort>Process</TableHeaderColumn>