Question

Mongo数据库可以返回带有嵌套数据的数组。我想显示以下内容中包含的数据： {applications：{data：{description：＆＃39;我的说明}}}

但它根本不起作用。你对如何做有一个想法，我没有在doc或SO中找到任何东西。

＆＃13;

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

＆＃13;

感谢您的帮助;）

Answer 1

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

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

所以，这是我的最终代码：

＆＃13;

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

＆＃13;

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>

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

3 个答案: