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

【问题标题】：Unable to access nested fields in react-bootstrap-table无法访问 react-bootstrap-table 中的嵌套字段
【发布时间】：2016-06-17 14:19:25
【问题描述】：

Mongo 数据库可以返回一个包含嵌套数据的数组。我想显示包含在以下内容中的数据： {应用程序：{数据：{描述：'我的描述}}}

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

感谢您的帮助；）

【问题讨论】：

您将密钥指定为application，但您的代码使用的是applications？要么这样，要么给我们更有意义的代码。
是的，抱歉错字。定影。我找到了解决方案，我会在几分钟内发布。谢谢;)

标签： javascript reactjs react-bootstrap-table

【解决方案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>
)

【讨论】：

【解决方案2】：

我有一个类似的用例，我得到一个地址对象，它是一个 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>
);

}

【讨论】：

【解决方案3】：

我对@987654321@ 做过类似的事情：

为了进一步了解嵌套字段，我将传递字符串，然后返回键/值对。

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>

【讨论】：

您能进一步解释一下吗？