Question

我正在使用react-bootstrap-table作为react中的数据表，这里从后端获取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添加到您的专栏中即可解决我的问题。在这里，单元格具有列数据，行具有总计行数据。

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>

如何动态添加href到react-bootstrap-table列？

1 个答案: