如何動態地將href添加到react-bootstrap-table列？

Question

我在反應中使用 react-bootstrap-table 作為數據表，這里從后端獲取 c=data 作為 JSON 對象。 如何將ahref動態添加到react-bootstrap-table中的列

 const data = [ { id: 0, name: 'John Doe', registered: '2018/01/01', role: 'Guest', status: 'Pending' }, { id: 1, name: 'Samppa Nori', registered: '2018/01/01', role: 'Member', status: 'Active' } ] <BootstrapTable data={this.data} version="4" striped hover pagination search options={this.options}> <TableHeaderColumn dataField="name" dataSort>Name</TableHeaderColumn> <TableHeaderColumn isKey dataField="email">Email</TableHeaderColumn> <TableHeaderColumn dataField="age" dataSort>Age</TableHeaderColumn> <TableHeaderColumn dataField="city" dataSort>City</TableHeaderColumn> </BootstrapTable>

當用戶單擊名稱列時，它應該重定向到 user/:id，所以我想動態地將 ahref 添加到名稱列。 可以幫助將 href 添加到 react-bootstrap-table

Answer 1

經過 2 小時的研究，只需將 dataFormat 添加到您的列中即可解決我的解決方案。 這里 Cell 有列數據，Row 有總行數據。

CellFormatter(cell, row) {
    return (<div><a href={cell+"/"+row.age}>{cell}</a></div>);
  }

 <BootstrapTable data={this.table} version="4" striped hover pagination search options={this.options}>
                  <TableHeaderColumn dataField="name"  dataFormat={this.CellFormatter}   dataSort>Name</TableHeaderColumn>
                  <TableHeaderColumn isKey dataField="email">Email</TableHeaderColumn>
                  <TableHeaderColumn dataField="age" dataSort>Age</TableHeaderColumn>
                  <TableHeaderColumn dataField="city" dataSort>City</TableHeaderColumn>
                </BootstrapTable>