react-bootstrap-table如何访问数据中的嵌套子对象属性

代码无法正常渲染嵌套属性有两个核心问题：

• TableHeaderColumn的dataField属性要求传入字符串类型的字段标识，原代码第一列写dataField={item.id}、第三列写dataField={manufacturere.name}属于完全错误的写法：当前渲染作用域下不存在item、manufacturere（此处还存在单词拼写错误，正确应为manufacturer）变量，传入的值为undefined，自然无法渲染内容。
• 初代react-bootstrap-table（v2之前版本）默认不支持自动解析点分隔的嵌套对象路径，就算直接把"manufacturer.name"作为字符串传给dataField，也无法直接读取到嵌套属性。

方案1：自定义列格式化函数（全版本通用） #

给对应列配置dataFormat属性，传入自定义渲染函数，从行数据中读取目标嵌套属性返回即可，同时修正其他列的错误写法：

<BootstrapTable data={features} striped hover condensed>
  {/* 主键列dataField传入字符串形式的主键字段名 */}
  <TableHeaderColumn dataField="id" isKey>ID</TableHeaderColumn>
  <TableHeaderColumn dataField="name">NAME</TableHeaderColumn>
  <TableHeaderColumn 
    dataField="manufacturer" 
    dataFormat={(cell) => cell.name}
  >
    MANUFACTURER
  </TableHeaderColumn>
</BootstrapTable>

dataFormat的第一个参数是当前dataField对应的字段值，此处dataField设为manufacturer，拿到的就是每行的厂商对象，直接取.name返回即可正常渲染。
如果需要组合渲染嵌套对象内的多个属性，可以用dataFormat的第二个参数（整行数据对象）取值，比如同时展示厂商名和类型：

<TableHeaderColumn 
  dataField="manufacturer" 
  dataFormat={(cell, row) => `${row.manufacturer.name} - ${row.manufacturer.type}`}
>
  MANUFACTURER
</TableHeaderColumn>

方案2：嵌套路径写法（仅适用于react-bootstrap-table2/ react-bootstrap-table-next） #

如果使用的是第二代重构版react-bootstrap-table，组件原生支持点分隔的嵌套字段路径，不需要写自定义格式化函数，直接将路径作为字符串传入dataField即可。注意第二代版本将主键配置移到了表格根组件的keyField属性上，和老版本写法有区别：

<BootstrapTable keyField='id' data={features} striped hover condensed>
  <TableHeaderColumn dataField="id">ID</TableHeaderColumn>
  <TableHeaderColumn dataField="name">NAME</TableHeaderColumn>
  {/* 直接传入点分隔的嵌套路径字符串 */}
  <TableHeaderColumn dataField="manufacturer.name">MANUFACTURER</TableHeaderColumn>
</BootstrapTable>

内容的提问来源于stack exchange，提问作者viparvez