7

Mongo 数据库可以返回一个包含嵌套数据的数组。我想显示包含在以下内容中的数据：{applications: {data: {description: 'My description}}}

但它根本不起作用。你有什么想法吗，我在文档和 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>
)

谢谢你的帮助 ;）

4

3 回答 3

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

于 2016-06-17T15:05:41.053 回答
1

我有一个类似的用例，我得到一个地址对象，它是一个 JSON，我必须将该地址格式化为人类可读的（通用地址）格式并将其提供给单元格。React Bootstrap Table 在 TableHeaderColumn 组件上有一个名为“dataFormat”的属性，它接受一个函数（或我不确定字符串的字符串）并相应地格式化数据。我的示例代码如下。（可能有一些语法错误，我没有在 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>
);

}

于 2017-07-22T00:13:08.217 回答
0

我用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>
于 2019-03-29T11:34:59.860 回答