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

Question

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> ) 

谢谢你的帮助 ;）

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

我有一个类似的用例，我得到一个地址对象，这是一个JSON，我必须将该地址格式化为人类可读（通用地址）格式并将其提供给单元格。 React Bootstrap Table在TableHeaderColumn组件上有一个名为'dataFormat'的属性，它接受一个函数（或String我不确定字符串）并相应地格式化数据。 我的示例代码如下。 （可能有一些语法错误，我没有输入IDE：＃，希望你能搞清楚;））

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/做了类似的事情：

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

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>